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行。

在javascript中删除表行的所有克隆节点

2 个答案: