删除所有子节点，但第一个

Question

我有一个 HTML table。第一行包含一个复选框。有一个 javascript 方法与复选框更改相关联。如果选中该复选框，代码将向 table 添加几行并填充它们。如果未选中该复选框，代码将删除除第一行（包含该复选框的行）之外的所有行。

代码的第一部分工作正常：行已正确添加。

我对第二部分有疑问。这是我的代码：

if (checkboxValue) {
    //Add first row
    var tr1 = document.createElement("tr");
    var td1_1 = document.createElement("td");
    ....
    tr1.appendChild(td1_1);
    var td1_2 = document.createElement("td");
    ...
    tr1.appendChild(td1_2);
    table.appendChild(tr1);

    //Add second row
    var tr2 = document.createElement("tr");
    var td2_1 = document.createElement("td");
    ...
    tr2.appendChild(td2_1);
    var td2_2 = document.createElement("td");
    ...
    tr2.appendChild(td2_2);
    table.appendChild(tr2);

} else {
    //Remove all rows but the first
    var rows = table.getElementsByTagName("tr");
    var nbrRows = rows.length;
    if (nbrRows > 1) {
        for (var i = 1; i < nbrRows; i++) {
            var row = rows[i];
            row.parentNode.removeChild(row);
        }
    }
}

问题总是来自 rows[2] 未定义。我不知道为什么！

如果我不使用 removeChild，而是写 row.innerHTML = ""，我就有了我正在寻找的视觉效果（所有行都消失了），但这并不优雅，因为 table 现在包含几个空行（每次我 check/uncheck 复选框时它们的数量都会增加）。

线索？非常感谢您的宝贵时间！

Answer 1

您从正在迭代的数组中删除了一行。这总是一个坏主意，并且可能是您出错的原因。

解决方案：从末尾而不是从头开始迭代。

另见示例：example

Answer 2

尝试替换这一行

var rows = table.getElementsByTagNames("tr");

来自

var rows = table.find("tr");

Answer 3

不要使用 for 循环删除这样的 DOM 元素。问题是 rows 是 live collection，这意味着每次从 DOM 中删除元素时它都会更新。结果，i 反击移位，最终你击中了 "undefined" 元素点。

而是使用 while 循环。例如，要删除除第一行之外的所有行，您可以执行以下操作：

var rows = table.getElementsByTagName("tr");
while (rows.length > 1) {
    rows[1].parentNode.removeChild(rows[1]);
}

另请注意，它是 getElementsByTagName 没有 s。

UPD。如果您更喜欢 for 循环，也可以向后迭代：

var rows = table.getElementsByTagName("tr");
for (var i = rows.length - 1; i > 0; i--) {
    rows[i].parentNode.removeChild(rows[i]);    
}

演示： https://jsfiddle.net/9y03co6w/

删除所有子节点，但第一个

Remove all child nodes but the first one

javascript

html

checkbox

removechild