JavaScript for循环无法删除待办网站所有待办列表的问题

核心问题 #

• document.getElementsByClassName 返回的是实时动态HTML集合，删除DOM元素时集合长度会同步缩减，正序循环会出现计数偏差导致漏删
• 循环外提前获取的newList永远指向第一个匹配的.new-list元素，第一次删除后后续循环的remove()操作无效

修复方案 #

方案1：倒序遍历动态集合 #

倒序遍历不需要担心长度变化带来的索引错位问题：

let toDoList = document.querySelector(".to-do-list");
let newListClass = document.getElementsByClassName('new-list');

// 从最后一个元素往前遍历
for (let i = newListClass.length - 1; i >= 0; i--) {
    newListClass[i].remove();
}

方案2：转为静态数组后遍历 #

将动态集合转为普通数组，遍历过程中长度固定不会变化：

let toDoList = document.querySelector(".to-do-list");
let newListArr = Array.from(document.getElementsByClassName('new-list'));

newListArr.forEach(item => item.remove());

方案3：while循环反复取首个匹配元素 #

只要能查询到.new-list元素就执行删除，直到所有元素删除完毕：

let toDoList = document.querySelector(".to-do-list");
let newList;
while (newList = document.querySelector('.new-list')) {
    newList.remove();
}

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