Удаление всех узлов клона строки таблицы в JavaScript

Question

function newRow(t) {

    var parent = t.parentNode.parentNode.parentNode;

    var row = t.parentNode.parentNode.cloneNode(true);

    row.firstChild.nextSibling.firstChild.setAttribute('value', 'sumit');

    parent.appendChild(row);

}

function removeRow(t) {

    var y = t.parentNode.parentNode;
    y.parentNode.removeChild(y);

}

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

Answer 1

Просто добавьте имя класса к клонированным элементам, что позволит вам искать их и удалять позже:

var row = t.parentNode.parentNode.cloneNode(true);
row.className += ' clonedrow';
...

// Remove all the cloned rows
var clonedRows = document.querySelectorAll('.clonedrow');
for (var i = 0; i < clonedRows.length; i++) {
  clonedRows[i].parentNode.removeChild(clonedRows[i]);
}

Answer 2

После добавления клонированных строк в DOM они выглядят (для JavaScript) точно так же, как исходные строки.

Поскольку вы просто добавляете клонированные строки в тело таблицы, я бы сделал следующее:следующим образом:

• Вне функций, как только документ загружается, используйте .childNodes.length, чтобы получить количество строк в таблице и сохранить его глобально, скажем, lastpos.
• Когда вам нужно удалить клоны, начните с .childNodes[lastpos] и удаляйте узлы, пока в таблице снова не будет lastpos строк.