在HTML中的表单中单击按钮即可添加和删除输入字段

<form id="myForm">
  <div id="inputContainer">
    <!-- 初始的输入字段 -->
    <input type="text" name="inputField" />
  </div>
  <<button type="button" onclick="addInputField()">添加字段</button>
</form>

function addInputField() {
  var inputContainer = document.getElementById("inputContainer");
  
  // 创建新的输入字段
  var newInputField = document.createElement("input");
  newInputField.type = "text";
  newInputField.name = "inputField";
  
  // 将新的输入字段添加到容器中
  inputContainer.appendChild(newInputField);
}

function removeInputField(button) {
  var inputField = button.previousSibling;
  inputField.parentNode.removeChild(inputField);
  button.parentNode.removeChild(button);
}

<form id="myForm">
  <div id="inputContainer">
    <!-- 初始的输入字段 -->
    <input type="text" name="inputField" />
  </div>
  <button type="button" onclick="addInputField()">添加字段</button>
</form>

<script>
  function addInputField() {
    var inputContainer = document.getElementById("inputContainer");
    
    // 创建新的输入字段
    var newInputField = document.createElement("input");
    newInputField.type = "text";
    newInputField.name = "inputField";
    
    // 创建删除按钮
    var deleteButton = document.createElement("button");
    deleteButton.type = "button";
    deleteButton.innerHTML = "删除";
    deleteButton.onclick = function() {
      removeInputField(deleteButton);
    };
    
    // 将新的输入字段和删除按钮添加到容器中
    inputContainer.appendChild(newInputField);
    inputContainer.appendChild(deleteButton);
  }
  
  function removeInputField(button) {
    var inputField = button.previousSibling;
    inputField.parentNode.removeChild(inputField);
    button.parentNode.removeChild(button);
  }
</script>