如何创建可根据用户交互动态增删input field的表单？

你的现有代码是可行的 #

你的代码已经正确实现了需求：初始显示一个输入框，点击添加按钮新增字段，点击移除按钮删除最后一个（同时保留至少一个输入框）。逻辑完整，能够正常运行。

可以优化的几个方向 #

1. 使用更现代高效的DOM方法 #

• 用querySelector替代getElementById，语法更统一，后续扩展更灵活
• 用lastElementChild直接获取最后一个子元素，比getElementsByTagName更高效（后者返回动态集合，每次访问都会重新查询DOM）
• 用remove()方法替代removeChild，语法更简洁直观

优化后的JS代码：

const addButton = document.querySelector('#addInput');
const removeButton = document.querySelector('#removeInput');
const inputContainer = document.querySelector('#inputContainer');

addButton.addEventListener('click', () => {
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.name = 'inputField[]';
  inputContainer.appendChild(newInput);
});

removeButton.addEventListener('click', () => {
  const lastInput = inputContainer.lastElementChild;
  if (inputContainer.children.length > 1) {
    lastInput.remove();
  } else {
    alert('至少保留一个输入框！');
  }
});

2. 给输入框添加独立容器（提升样式可控性） #

如果后续需要给每个输入框加间距、单独删除按钮等，把每个input包裹在div里会更灵活：

修改后的HTML：

<form id="dynamicForm">
  <div id="inputContainer">
    <div class="input-group">
      <input type="text" name="inputField[]">
    </div>
  </div>
  <button type="button" id="addInput">Add Input</button>
  <button type="button" id="removeInput">Remove Input</button>
</form>

对应的JS调整：

addButton.addEventListener('click', () => {
  const inputGroup = document.createElement('div');
  inputGroup.className = 'input-group';
  
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.name = 'inputField[]';
  
  inputGroup.appendChild(newInput);
  inputContainer.appendChild(inputGroup);
});

removeButton.addEventListener('click', () => {
  const lastGroup = inputContainer.lastElementChild;
  if (inputContainer.children.length > 1) {
    lastGroup.remove();
  } else {
    alert('至少保留一个输入框！');
  }
});

3. 动态控制移除按钮状态（优化用户体验） #

当只剩一个输入框时，直接禁用移除按钮，比弹窗提示更友好：

// 更新移除按钮状态
function updateRemoveButtonState() {
  removeButton.disabled = inputContainer.children.length <= 1;
}

// 添加按钮逻辑
addButton.addEventListener('click', () => {
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.name = 'inputField[]';
  inputContainer.appendChild(newInput);
  updateRemoveButtonState();
});

// 移除按钮逻辑
removeButton.addEventListener('click', () => {
  const lastInput = inputContainer.lastElementChild;
  lastInput.remove();
  updateRemoveButtonState();
});

// 页面加载时初始化状态
updateRemoveButtonState();

总结 #

你的原始代码完全能满足核心需求，上述优化主要是提升代码的可读性、执行效率和用户体验，可根据实际场景选择性使用。

内容的提问来源于stack exchange，提问作者Sarrah Gandhi