JS动态增删Div问题：deleteInput()无法连续删除两个Div求助

嘿，我仔细捋了你的代码逻辑，终于找到deleteInput()没法连续删除div的问题根源啦！

核心问题出在两个地方： #

1. 重复的ID属性：你所有动态生成的子容器都用了id="child"，但HTML规范里id必须是唯一的。当你多次添加div后，DOM里存在多个相同id的元素，这会导致document.getElementById('child')永远只能找到第一个匹配的元素，后续的删除按钮根本没绑定到事件上。
2. 事件绑定的局限性：你一开始只给初始的那个#child里的删除按钮绑定了点击事件，但动态新增的div里的删除按钮并没有被绑定事件，所以第一次删除后，剩下的div点击删除是无效的。

修复方案（两步搞定）： #

第一步：把ID改成类名，避免重复

把初始HTML里的<div id="child"改成<div class="child"，同时在你动态创建div的代码里，也把设置id的代码换成添加类名的逻辑，比如：

// 动态创建子div时的代码修改
let newChild = document.createElement('div');
newChild.className = 'child showE field'; // 用className替代setAttribute('id', 'child')
// 其他创建元素的逻辑保持不变

第二步：用事件委托替代单独绑定事件

删掉原来的deleteInput()函数里的事件绑定逻辑，换成给父容器#parent绑定事件，利用事件冒泡来处理所有删除按钮的点击：

// 给父容器绑定点击事件，监听所有删除按钮
document.getElementById('parent').addEventListener('click', function(e) {
  // 判断点击的是不是删除按钮
  if (e.target.classList.contains('delete')) {
    // 找到当前点击按钮所属的子div
    const targetDiv = e.target.closest('.child');
    if (targetDiv) {
      targetDiv.remove();
    }
  }
});

为什么这样能解决连续删除的问题？ #

事件委托的好处是不管是页面初始就有的元素，还是后来动态添加的元素，只要点击的元素符合条件（这里是带delete类的按钮），父容器的事件都会捕获到这个点击动作，然后执行删除逻辑。同时用类名代替重复id，也从根源上解决了DOM选择器找不到元素的问题。

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