为什么删除第一个元素后无法删除第二个元素？JS按钮删除父元素异常问题

这个问题我之前也踩过坑！核心原因是你用getElementsByClassName获取到的是动态的HTMLCollection，它会随着DOM结构的变化自动更新，咱们来一步步分析问题出在哪：

问题根源 #

当页面初始化时，btn集合里有2个元素，循环给每个按钮绑定了点击事件。但当你删除第一个元素后，这个动态集合会立刻更新，长度从2变成1。此时你点击第二个按钮时，事件处理函数里尝试访问btn[i]——这里的i是循环时的1，但现在btn集合里只有索引0的元素，自然就会抛出btn[i] undefined的错误。

几种可行的解决方案 #

方案1：用this替代btn[i]（最简单）

点击事件的回调函数里，this指向的就是当前被点击的按钮元素，完全不需要依赖那个动态集合，代码修改超简单：

let btn = document.getElementsByClassName('remove');
for (let i = 0; i < btn.length; i++) {
  btn[i].onclick = function() {
    this.parentElement.remove(); // 直接用this获取当前按钮
  }
}

方案2：把动态集合转为静态数组

将HTMLCollection转为普通数组，这样数组不会随DOM变化而更新，循环绑定的索引就不会失效：

// 用Array.from转为静态数组
let btn = Array.from(document.getElementsByClassName('remove'));
// 也可以用扩展运算符：let btn = [...document.getElementsByClassName('remove')];

for (let i = 0; i < btn.length; i++) {
  btn[i].onclick = function() {
    btn[i].parentElement.remove();
  }
}

方案3：事件委托（最优雅，推荐）

如果以后可能会动态添加新的删除按钮，事件委托是更好的选择——只需要给一个稳定的父元素绑定一次事件，就能处理所有子元素的点击，不需要重复绑定：

// 选择一个稳定的父容器（比如这两个div的共同父元素，或者直接用body）
document.body.addEventListener('click', function(e) {
  // 判断点击的元素是删除按钮
  if (e.target.classList.contains('remove')) {
    e.target.parentElement.remove();
  }
});

总结 #

优先推荐方案1或方案3：方案1代码改动最小，适合当前场景；方案3扩展性更强，后续新增元素也能自动生效。

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