JavaScript移除HTML表格行时循环提前终止问题排查

问题重现 #

相关代码（ticketList为HTML表格ID）：

// ticketList refers to an html table id
console.log("ticketList.rows.length before: " + ticketList.rows.length);
for (i= 1; i < ticketList.rows.length; i++) {
    ticketList.rows[i].remove();
    console.log(`ticket ${i - 1} removed`);
}

// some more code which works properly

console.log("ticketList.rows.length after: " + ticketList.rows.length);

控制台输出：

ticketList.rows.length before: 13
ticket 0 removed
ticket 1 removed
ticket 2 removed
ticket 3 removed
ticket 4 removed
ticket 5 removed
ticketList.rows.length after: 19

初始行长度13正确，但循环仅执行6次，未按预期移除12行；硬编码循环终止值时，出现错误：

Cannot read properties of undefined (reading 'remove')

原因解析 #

• 动态集合导致索引错位：ticketList.rows是动态的HTMLCollection集合，而非静态数组。移除一行时，集合会实时更新长度和元素索引。正向循环中，每次移除rows[i]后，后续行自动前移填补空缺，但循环变量i仍在递增，直接跳过了原本该处理的下一行。比如初始13行（索引1-12），移除i=1的行后，原i=2的行变为新的i=1，而i递增到2时，直接处理新的i=2（原i=3），最终只处理了一半的行。
• 硬编码终止值报错原因：如果硬编码循环条件（比如i < 13），移除部分行后rows.length会小于13，此时i会超过当前集合的最大索引，ticketList.rows[i]变为undefined，调用remove()就会抛出读取undefined属性的错误。

解决方法 #

推荐使用反向循环，从最后一行开始往前移除，避免元素前移导致的索引错位：

console.log("ticketList.rows.length before: " + ticketList.rows.length);
// 从最后一行倒序遍历到第1行
for (let i = ticketList.rows.length - 1; i >= 1; i--) {
    ticketList.rows[i].remove();
    console.log(`ticket ${ticketList.rows.length - i} removed`);
}
console.log("ticketList.rows.length after: " + ticketList.rows.length);

也可以先将动态集合转为静态数组，再遍历移除：

const rows = Array.from(ticketList.rows);
// 跳过第0行，遍历剩余行
for (const row of rows.slice(1)) {
    row.remove();
}

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