删除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);

}

the above code is working fine but i want to delete all the clones at once which are created by above code on a onchange event of a select box

Answer 1

Just add a class name to the cloned elements which would allow you to search for them and delete them later:

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

Once the cloned rows have been added to the DOM, they look (to JavaScript) just like the original rows.

Since you're just appending cloned rows to the table body, what I would do is as follows:

• Outside the functions, as soon as the document loads, use .childNodes.length to get the number of rows in your table and store it globally in, say, lastpos .
• When you need to delete the clones, start at .childNodes[lastpos] and remove nodes until the table has lastpos rows again.