0

我有一个里面有多个元素的元素。里面的元素都具有相同的名称。是否有一个功能可以删除所有这些？

（请参阅此问题，例如Remove multiple children from parent?

4

4 回答 4

4

这是一个解决方案，它为具有指定 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'});

还有一个用于测试的小提琴：

注意：您只能在 JavaScript 中可靠地访问 name 元素，前提是它在您的元素上受支持（例如，不在 DIV 上！）。请参阅此处了解原因。

更新：

这是基于我们的对话使用 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);
    }
}
于 2011-07-22T20:48:22.043 回答
1

2021年答案：

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

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

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

于 2021-07-28T19:17:54.897 回答
0

好的，这应该很容易。首先获取父元素：

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

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

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

最后，用循环删除它们：

for (var i = 0; i < theChildren.length; i++)
{
  theParent.removeChild(theChildren[i]);
}
于 2011-07-22T20:42:34.733 回答
-1

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

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

或者

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

而且，你可以在这里看到一个演示：http: //jsfiddle.net/jfriend00/ZBYCh/

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

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

如果您尝试仅删除一部分子项（并使其他子项保持原样），那么您需要更具体地确定如何确定要留下哪些子项以及要删除哪些子项。在 jQuery 中，您可以使用 .find() 选择器或 filter() 选择器将子项列表缩小到您想要删除的目标子项。

于 2011-07-22T20:42:15.577 回答