JavaScript 中使用 removeChild 清空表格行的正确方法

JavaScript removeChild 删除表格行的常见陷阱

假设有一段常规的前端代码需要处理表格数据：

其中变量 gift_list 代表目标表格的 ID 属性。

var giftBody = document.getElementById("gift_list").getElementsByTagName("tbody")[0];
var giftTrs = giftBody.getElementsByTagName("tr");
for (var i=0;i<giftTrs.length;i++)
{ 
giftTrs[i].removeChild(giftTrs[i]);
} 

执行该逻辑时，往往只能成功删除第一行数据。这是因为 DOM 节点是实时引用的，一旦移除某个子节点，后续节点的索引会自动前移，导致循环逻辑与实际节点位置错位。

与此同时，集合的 length 属性会随之动态减小，使得原本设定的循环条件失效，从而无法遍历并删除剩余的行。

正确的动态删除实现方案

因此，推荐采用以下修正后的操作策略：

var giftBody = document.getElementById("gift_list").getElementsByTagName("tbody")[0];
var giftTrs = giftBody.getElementsByTagName("tr");
var len = giftTrs.length; //需要将giftTrs.length的length属性存储起来
for (var i=0;i<len;i++)
{ 
giftBody.removeChild(giftTrs[0]);
}