JS表单的添加和删除完整代码

以下是使用原生JS实现表单添加和删除的完整代码示例：

HTML代码：

<form id="myForm">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" required>
  </div>
  <div id="formBtns">
    <button type="button" id="addBtn">Add</button>
  </div>
</form>

JS代码：

// 获取表单元素和按钮元素
const myForm = document.getElementById("myForm");
const addBtn = document.getElementById("addBtn");

// 添加按钮点击事件监听器
addBtn.addEventListener("click", function() {
  // 克隆第一个表单项
  const firstForm = myForm.children[0];
  const newForm = firstForm.cloneNode(true);
  
  // 重置新表单项中的输入框内容
  const inputs = newForm.querySelectorAll("input");
  inputs.forEach(input => input.value = "");
  
  // 添加新表单项
  myForm.insertBefore(newForm, myForm.lastElementChild);
  
  // 添加删除按钮
  const deleteBtn = document.createElement("button");
  deleteBtn.type = "button";
  deleteBtn.textContent = "Delete";
  deleteBtn.addEventListener("click", function() {
    myForm.removeChild(newForm);
    myForm.removeChild(deleteBtn);
  });
  myForm.insertBefore(deleteBtn, myForm.lastElementChild);
});

在这个示例中，我们首先获取表单元素和添加按钮元素。然后，我们添加一个点击事件监听器来处理添加按钮的点击事件。在事件处理程序中，我们克隆第一个表单项，重置新表单项中的输入框内容，并将其添加到表单中。然后，我们创建一个删除按钮，并添加一个点击事件监听器来处理删除按钮的点击事件。在事件处理程序中，我们从表单中删除新表单项和删除按钮。

注意：在这个示例中，我们使用了insertBefore()方法来添加新表单项和删除按钮。这个方法接受两个参数：要添加的节点和参考节点。我们使用表单的lastElementChild属性作为参考节点，以确保新表单项和删除按钮被添加到表单的最后一个位置。