在循环中使用.remove()移除DOM节点为何无法全部删除？

嘿，这个问题我之前踩过坑！咱们来唠唠为啥会出现这种删不干净的情况，还有怎么解决它。

问题根源：动态DOM集合的“坑” #

当你用类似document.getElementsByClassName()或者document.getElementsByTagName()这类方法获取DOM节点集合时，得到的是HTMLCollection——这是一个动态实时更新的集合。也就是说，每当你删除一个DOM节点，这个集合的长度和内部元素的索引都会立刻发生变化。

举个直观的例子：假设你有4个带.alert类的节点，索引分别是0、1、2、3。

• 第一次循环（i=0）：删除索引0的节点，此时集合自动更新，剩下的节点索引变成0、1、2（对应原来的1、2、3）
• 第二次循环（i=1）：你现在删的是新集合里索引1的节点（也就是原来的索引2的节点），原来的索引1的节点被跳过了
• 第三次循环（i=2）：此时集合长度已经变成3，循环条件不满足，直接结束，导致原来的索引1的节点没被删掉

这就是为啥你总删不全的原因！

解决办法：三种靠谱的方案 #

1. 倒序遍历删除

从最后一个节点往前删，这样就算前面的节点索引变化，也不会影响当前要删除的节点位置：

let alerts = document.getElementsByClassName('alert');
// 从最后一个元素开始倒序循环
for (let i = alerts.length - 1; i >= 0; i--) {
  alerts[i].remove();
}

2. 转成静态数组再遍历

把动态的HTMLCollection转成静态的数组，这样遍历的是数组副本，DOM节点的删除不会影响数组的内容：

// 方法1：用Array.from()转成数组
let alerts = Array.from(document.getElementsByClassName('alert'));
// 方法2：用展开运算符转成数组
// let alerts = [...document.querySelectorAll('.alert')];

// 遍历数组删除每个节点
alerts.forEach(alertEl => alertEl.remove());

这里用querySelectorAll()的话，它返回的是NodeList，虽然某些情况下是静态的，但转成数组更稳妥。

3. 用while循环持续删第一个节点

只要集合里还有节点，就一直删除第一个元素，直到集合为空：

let alerts = document.getElementsByClassName('alert');
while (alerts.length > 0) {
  alerts[0].remove();
}

这个方法逻辑最简单，每次都拿当前集合的第一个节点删除，不用管索引变化。

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