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