Удалите все дочерние узлы, но первый

Question

У меня есть таблица HTML. Первая строка содержит флажок. Существует метод javascript, связанный с изменением флажка. Если флажок установлен, код добавляет несколько строк в таблицу и заполняет их. Если флажок снят, код удаляет все строки, кроме первого (тот, который содержит флажок).

Первая часть кода работает нормально: строки правильно добавлены.

У меня проблема со второй частью. Вот мой код:

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 = "", у меня есть визуальный эффект, я ищу (все строки ушли), но это некрасиво, так как теперь таблица содержит несколько пустых строк (их число возрастало каждый раз я проверяю/снимите флажок).

Подсказка? Спасибо вам большое за ваше время!

Answer 1

Не следует использовать для цикла, чтобы удалить DOM элементы, как это. Проблема в том, что rows является live collection, что означает, что он обновляется каждый раз, когда вы удаляете элементы из DOM. В результате i счетчик сдвигает и в итоге вы нажмете «неопределенное» пятно элемента.

Вместо этого используйте цикл while. Например, чтобы удалить все строки, кроме первой, вы могли бы сделать:

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

Также обратите внимание, что это getElementsByTagName без s.

UPD. Или итерация назад, если вы хотите для-петли лучше:

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

Демо:https://jsfiddle.net/9y03co6w/

Answer 2

вы удаляете строку из массива, который вы итерируете. Это всегда плохая идея и, вероятно, причина вашей ошибки.

Решение: начать повторение с конца, а не на начало.

также смотри, например: example

Answer 3

попытка заменить эту строку

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

по

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