javascript - 如何从正文中删除重复的dom元素？

Question

我已经用类名“combo”克隆了 body 中的 div 重复元素。我需要删除除原始 div 元素之外的所有重复项

Answer 1

问题是克隆的对象将具有与原始对象相同的属性，因此很难区分它们，但是，您可以尝试以下操作：

(function()
{
                   //or indeed: querySelector('.combo') which returns a single DOM ref
    var original = document.querySelectorAll('.combo')[0];//reference to the original
    //clone and add
    function removeClones()
    {
        var i,all = document.querySelectorAll('.combo');
        for(i=0;i<all.length;i++)
        {
            if (all[i] !== original)
            {//this is a clone
                all[i].parentNode.removeChild(all[i]);
            }
        }
    }
}());

那应该这样做。另一种方法是在将克隆附加到 DOM 之前将类添加到克隆：

var clone = original.cloneNode(true);
clone.className += ' combo-clone';
//then, to remove:
var clones = document.querySelectorAll('combo-clone');//selects all clones

Answer 2

在某处（例如数组）保留对克隆元素的引用。循环遍历该数组并调用foo.parentNode.removeChild(foo)每个值。

Answer 3

var fn = function(originalEl){

    var els = document.querySelectorAll('.combo');

    for(var i=0; i<els.length; i++){
        if( els[i] !== originalEl ){
            els[i].parentNode.removeChild(els[i]);
        }
    }

}