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用于测试：

注意：只有在元素支持时才能在JavaScript中可靠地访问name元素（例如，不在DIV上！）。有关原因，请参阅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);
    }
}

Answer 2

2021 答案：

也许有很多方法可以做到，例如Element.replaceChildren()。我想向您展示一个有效的解决方案，其中只有一次重绘和重排支持所有 ES6+ 浏览器。

function removeChildren(cssSelector, parentNode){
    var elements = parentNode.querySelectorAll(cssSelector);
    let fragment = document.createDocumentFragment(); 
    fragment.textContent=' ';
    fragment.firstChild.replaceWith(...elements);
}

用法：removeChildren('.foo',document.body);：删除foo中所有className为<body>的元素

Answer 3

好吧，这应该很容易。首先得到父元素：

var theParent = document.getElementById("notSoHappyFather");

然后获取要删除的节点数组：

var theChildren = theParent.getElementsByName("unluckyChild");

最后，使用循环删除它们：

for (var i = 0; i < theChildren.length; i++)
{
  theParent.removeChild(theChildren[i]);
}

Answer 4

HTML示例可以为您提供更完整的答案，但是可以相当轻松地调用DOM函数来获取子项列表并将其删除。在jQuery中，删除所有子代将是这样的：

$("#target > *").remove();

或

 $("#target").html("");

并且，您可以在此处看到演示：http://jsfiddle.net/jfriend00/ZBYCh/

或者，不使用jQuery，你也可以这样做：

document.getElementById("target").innerHTML = "";

如果您尝试仅删除子项的子集（并保留其他子项），则需要更具体地说明如何确定要离开哪些子项以及要删除哪些子项。在jQuery中，您可以使用.find（）select或filter（）选择器将子项列表缩小到您想要删除的子项。

使用removeChild删除多个具有相同名称的元素？

4 个答案: