DOM元素删除后，如何获取forEach循环中点击项的更新索引？

你的问题出在绑定点击事件时存的是初始索引，当元素被移除后，后续document.querySelectorAll('.divs')返回的元素集合索引已经更新，但之前绑定的index还是最初的数值，自然会匹配错误。下面给你两种可行的解决方法：

方法一：点击时实时计算当前元素的索引 #

不需要依赖绑定阶段的index，而是在点击事件触发时，通过当前元素的兄弟节点来计算实时索引：

function setupDelete() {
  const elms = document.querySelectorAll('.divs');
  elms.forEach(item => {
    item.addEventListener('click', function() {
      // 实时获取当前所有.divs元素并转为数组
      const currentElms = Array.from(document.querySelectorAll('.divs'));
      // 找到当前点击元素在最新集合中的索引
      const currentIndex = currentElms.indexOf(this);
      console.log('当前元素索引：', currentIndex);
      // 移除当前元素
      this.remove();
    });
  });
}

注意：delete是JavaScript的保留关键字，不能用作函数名，这里改成了setupDelete。

方法二：使用事件委托（更推荐） #

事件委托利用事件冒泡特性，只在父元素上绑定一次事件，不管元素是新增还是移除，都能正确获取当前元素的索引，性能也更好：

// 假设所有.divs的父元素是.container，根据实际页面结构修改选择器
document.querySelector('.container').addEventListener('click', function(e) {
  if (e.target.classList.contains('divs')) {
    const currentElms = Array.from(document.querySelectorAll('.divs'));
    const currentIndex = currentElms.indexOf(e.target);
    console.log('当前元素索引：', currentIndex);
    e.target.remove();
  }
});

这种方法不用每次元素变化都重新绑定事件，尤其适合频繁增删元素的场景。

原代码错误原因 #

你最初的代码里，forEach循环绑定事件时，每个点击事件里的index是闭包保存的初始索引值。比如初始有3个元素，索引0、1、2，当你移除索引0的元素后，剩下的元素索引变成0、1，但之前绑定给第二个元素的点击事件里的index还是1，这时候document.querySelectorAll('.divs')[1]其实是原来的第三个元素，自然就出现了索引匹配错误。

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