JavaScript中element.remove()无法正常移除DOM节点问题

element.remove()方法执行表现不符合预期，可通过以下代码复现问题：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    class View {
      constructor() {
        this.parent = document.querySelector('#root')
      }
      template() {
        return `
        <div>Random Num</div>
        <div>${Math.random()}</div>
        <button type='button'>Reset Random Num</button>
      `
      }
      render() {
        const templateElement = document.createElement('template')
        templateElement.innerHTML = this.template()
        templateElement.content
          .querySelector('button')
          .addEventListener('click', () => {
            this.rerender()
          })
        this.parent.append(templateElement.content)
      }
      rerender() {
        this.parent.childNodes.forEach((item) => {
          // 问题出在这里
          item.remove()
        })
        // const templateElement = document.createElement('template')
        // templateElement.innerHTML = this.template()
        // this.parent.append(templateElement.content)
      }
    }
    const viewIns = new View()
    viewIns.render()
  </script>
</html>

实际运行异常现象：

• 首次点击按钮时，DOM节点完全没有被移除，页面视觉无变化
• 再次点击按钮后，仅剩下包含随机数的div节点，其余节点消失

核心原因有两点：

1. childNodes返回的是实时更新的活节点集合（Live NodeList），不是静态的节点快照。当你在遍历过程中调用item.remove()删除节点时，这个集合会立刻同步DOM变动，剩余节点的索引自动前移，但forEach的遍历索引是按初始顺序递增的，会直接跳过部分节点。
2. 模板字符串里的换行、缩进会生成不可见的空白文本节点，这些节点也会被算在childNodes列表中。

两次点击的实际执行过程：

• 首次渲染完成后，#root下的childNodes按顺序是：4个空白文本节点 + 3个可见元素节点（标题div、随机数div、按钮），共7个节点。遍历时每次删除当前索引的节点后，后续节点前移，forEach索引自增后刚好跳过所有可见元素，只把看不见的空白文本节点删完了，所以视觉上看起来完全没有变化。
• 第二次点击时，#root下只剩3个可见元素节点，没有空白文本。遍历时索引0删除第一个div，索引1直接跳过已经移到索引0位置的随机数div，删除索引1位置的按钮，遍历结束后就只剩中间的随机数div。

选任意一种替换原有遍历删除逻辑即可：

• 方案1：将活节点集合转为静态数组后再遍历，遍历的是固定快照不会出现索引错位

  [...this.parent.childNodes].forEach((item) => {
    item.remove()
  })
  

• 方案2：直接清空父节点内容，代码最简洁执行效率最高

  this.parent.innerHTML = ''
  

• 方案3：循环删除第一个子节点直到父节点为空，不存在索引偏移问题

  while (this.parent.firstChild) {
    this.parent.removeChild(this.parent.firstChild)
  }
  

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