动态添加Text Input功能正常，但删除功能失效（需保留首个默认输入框）

我看了你的代码，问题主要出在动态创建的删除按钮没有绑定点击事件，以及删除逻辑没有限制“不能删除第一个输入框”这两点上。下面是修复后的完整代码和关键说明：

修复后的代码 #

<div id="dynamicInput">
  <div>
    <input type="text" name="myInputs[]">
    <!-- 第一个输入框不显示删除按钮 -->
  </div>
</div>
<button onclick="addInput('dynamicInput')">Add Input</button>

<script>
var counter = 1;
var limit = 3;

function addInput(divName){
  if (counter >= limit) {
    alert(`You have reached the limit of adding ${limit} inputs`);
    return;
  }
  
  var newdiv = document.createElement('div');
  // 给新输入框添加删除按钮，并绑定删除事件
  newdiv.innerHTML = `
    <input type="text" name="myInputs[]">
    <button onclick="removeInput(this)">Remove</button>
  `;
  document.getElementById(divName).appendChild(newdiv);
  counter++;
}

function removeInput(btn) {
  // 获取当前按钮所在的父div
  var inputDiv = btn.parentElement;
  // 获取所有输入框容器
  var allInputDivs = document.getElementById('dynamicInput').children;
  
  // 确保不是第一个输入框才删除
  if (inputDiv !== allInputDivs[0]) {
    inputDiv.remove();
    counter--;
  }
}
</script>

关键修复点 #

• 动态按钮绑定事件：在创建新输入框时，直接给删除按钮绑定removeInput(this)，这样点击按钮时能直接传递当前按钮元素，方便定位要删除的容器。
• 限制删除第一个输入框：在删除函数里，通过对比当前要删除的div是否是第一个子元素，确保默认的首个输入框不会被删除。
• 调整计数器逻辑：删除时把counter减回去，避免达到限制后删除了还不能添加新的输入框。

这样修改后，添加输入框的功能保持正常，同时除第一个外的输入框都能被正确删除啦～

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