在 Web 应用程序中，表单是常见的用户交互组件。有时候我们需要让用户添加多个相同类型的输入框，这就需要用到动态增加输入框的功能。本文将介绍如何使用 JavaScript 实现这一功能。
HTML 结构
首先，我们需要一个基本的 HTML 结构来容纳输入框和添加按钮：
<div id="input-fields"> <div class="input-field"> <input type="text" name="input[]" /> <button type="button" class="remove-field">Remove</button> </div> </div> <button type="button" id="add-field">Add Field</button>
这段代码中，我们首先创建了一个具有 id 属性为 input-fields 的 div 元素，用于包含所有的输入框。然后，在该元素下面包含了一个带有 class 属性为 input-field 的 div 元素，其中包含了一个文本输入框和一个 “Remove” 按钮。最后，我们在文档顶部定义了一个 “Add Field” 按钮，它用于添加新的输入框。
JavaScript 实现
接下来，我们需要编写 JavaScript 代码来实现添加和删除输入框的功能。以下是实现添加输入框的代码：
-- -------------------- ---- ------- ----- --------- - ------------------------------------- ----- ------------------ - ---------------------------------------- ----------------------------------- -- -- - ----- -------- - ------------------------------ ------------------ - - ---- -------------------- ------ ----------- -------------- -- ------- ------------- ------------------------------------ ------ -- ----------------------------------------- ---展开代码
这段代码中，我们首先获取到 Add Field 按钮和 input-fields 容器。然后，我们给 Add Field 按钮添加了一个点击事件监听器，在触发该事件时创建了一个新的带有 class 为 input-field 的 div 元素，并在其中插入了文本输入框和 “Remove” 按钮。最后，我们将新创建的元素追加到 input-fields 容器中。
接下来，我们需要实现删除输入框的功能。以下是实现删除输入框的代码：
inputFieldsWrapper.addEventListener('click', (event) => { if (event.target.classList.contains('remove-field')) { event.target.parentElement.remove(); } });
这段代码中，我们给 input-fields 容器添加了一个点击事件监听器。在此监听器中，我们检查被点击元素是否包含 class 属性为 remove-field，如果是，则删除其父元素（即包含文本输入框和 “Remove” 按钮的 div 元素）。
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ----- -------------- ------- ------ ---- ------------------ ---- -------------------- ------ ----------- -------------- -- ------- ------------- ------------------------------------ ------ ------ ------- ------------- ------------------ -------------- ------- ----------------------- ----- --------- - ------------------------------------- ----- ------------------ - ---------------------------------------- ----------------------------------- -- -- - ----- -------- - ------------------------------ ------------------ - - ---- -------------------- ------ ----------- -------------- -- ------- ------------- ------------------------------------ ------ -- ----------------------------------------- --- -------------------------------------------- ------- -- - -- ------------------------------------------------- - ------------------------------------ - --- --------- ------- -------展开代码
指导意义
本文介绍了如何使用 JavaScript 实现在表单
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/4061
