javascript - 使用removeChild删除多个同名元素？

Question

我有一个元素，里面有多个元素。里面的所有元素都具有相同的名称。有什么方法可以使用一个函数删除它们吗？

(例如引用这个问题 Remove multiple children from parent?

Answer 1

这是一个解决方案，用于删除具有指定 id 的父级的具有指定名称的第一级子级。如果您想更深入，您可以在您进入的子元素上递归地调用它(您还必须添加一个 parent 参数)。

function removeChildren (params){
    var parentId = params.parentId;
    var childName = params.childName;

    var childNodes = document.getElementById(parentId).childNodes;
    for(var i=childNodes.length-1;i >= 0;i--){
        var childNode = childNodes[i];
        if(childNode.name == 'foo'){
            childNode.parentNode.removeChild(childNode);
        }
    }
}

并调用它:

removeChildren({parentId:'div1',childName:'foo'});

还有一个fiddle用于测试:

注意:只有当元素支持 name 元素时(例如不在 DIV 上!)，您才能在 JavaScript 中可靠地访问 name 元素。请参阅here为什么。

更新:

Here根据我们的对话，这是一个使用 className 的解决方案:

function removeChildren (params){
    var parentId = params.parentId;
    var childName = params.childName;

    var childNodesToRemove = document.getElementById(parentId).getElementsByClassName('foo');
    for(var i=childNodesToRemove.length-1;i >= 0;i--){
        var childNode = childNodesToRemove[i];
        childNode.parentNode.removeChild(childNode);
    }
}