JavaScript for...of循环删除DOM节点仅移除半数元素问题排查

你遇到的待删除文章仅移除一半的问题，由几个核心逻辑错误共同导致：

• document.getElementsByClassName('article') 返回的是实时更新的HTMLCollection，不是固定的节点列表。遍历过程中删除DOM节点时，这个集合会立刻同步移除对应项、长度缩短：比如初始集合有[文章A, 文章B, 文章C]三个元素，遍历到索引0删除A后，集合会立刻变成[文章B, 文章C]，下一次遍历走索引1时拿到的是C，直接跳过了B，最终就会出现只删一半匹配节点的问题。
• 筛选匹配逻辑写反了：选中2020筛选按钮时，你代码里删除的是data-year="Y2020"的文章，和「选中某年份就保留该年份文章、移除其余年份」的预期完全相反。
• 分支判断逻辑错误：当前代码仅判断筛选按钮元素是否存在，没有判断按钮是否处于选中状态。如果两个筛选按钮同时存在于页面上，代码永远只会走2020的筛选分支，永远不会执行2021的筛选逻辑。
• 额外细节错误：获取2020筛选按钮时写的是getElementById('filter20')，如果按钮实际id是filter2020会直接获取不到元素，需要确认id和实际DOM匹配。

1. 把获取到的实时文章集合转成静态数组（或直接用返回静态节点列表的选择器方法），避免DOM删除操作影响遍历顺序
2. 修正分支判断条件，改为判断对应筛选按钮是否处于选中状态
3. 修正匹配逻辑，选中某年份时删除所有非该年份的文章

修复后的参考代码：

// 请确认筛选按钮的id和实际DOM一致，示例修正了id不匹配的问题
const filter2020 = document.getElementById('filter2020');
const filter2021 = document.getElementById('filter2021');

// 筛选触发逻辑示例：如果是点击按钮触发筛选，可把以下逻辑放在按钮点击回调里
// 此处以判断按钮是否含active选中类为例，你可根据自己的选中交互替换判断条件
if (filter2020.classList.contains('active')) {
  // 将实时集合转为静态数组，遍历过程不会受DOM删除操作影响
  const posts = Array.from(document.getElementsByClassName('article'));
  posts.forEach(item => {
    // 选中2020时，移除所有非2020的文章
    if (item.dataset.year !== "Y2020") {
      item.remove();
    }
  })
} else if (filter2021.classList.contains('active')) {
  const posts = Array.from(document.getElementsByClassName('article'));
  posts.forEach(item => {
    // 选中2021时，移除所有非2021的文章
    if (item.dataset.year !== "Y2021") {
      item.remove();
    }
  })
}

如果你不想做数组转换，也可以直接用document.querySelectorAll('.article')获取文章列表，这个方法返回的是静态NodeList，本身就不会随DOM变动更新，不会出现遍历跳项漏删的问题。

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