Question

我想知道如何在某些条件下（如标签，类，属性...）删除父级的子级元素。

<div class="parent">
  <a class="child_a">atag content</a>
  <div class="middle">middle div</div>
  <input class='child_last">last input</div>
</div>

请分享您的代码！

Answer 1

它将仅删除div。您可以添加更多条件！

let p = document.getElementsByClassName("parent")[0];
p.childNodes.forEach(function(each){
    if(each.tagName === "DIV"){
      p.removeChild(each);
    }
});

Answer 2

var pEl = document.getElementsByClassName("parent")[0];
pEl.removeChild(pEl.getElementsByTagName("div")[0]);

Answer 3

您可以使用这些条件

 let parent = document.getElementsByClassName('parent')[0];
 parent.childNodes.forEach(c=>{
 if(c.className  == 'child_a'){
    parent.removeChild(c);
 }

 if(c.tagName  == 'INPUT'){
    parent.removeChild(c);
 }

 if(c.tagName != undefined && c.getAttribute('src') == 'test'){
    parent.removeChild(c);
 }

}）;

let parent = document.getElementsByClassName('parent')[0];
  parent.childNodes.forEach(c=>{
     if(c.className  == 'child_a'){
		parent.removeChild(c);
	 }
	
	 if(c.tagName  == 'INPUT'){
		parent.removeChild(c);
	 }
	 
	 if(c.tagName != undefined && c.getAttribute('src') == 'test'){
	    parent.removeChild(c);
	 }
  });

<div class="parent">
  <a class="child_a">A</a>
  <div class="middle">DIV</div>
  <input class="child_last" />
  
  <img src="test" />
</div>

Answer 4

我对该问题的解决方案是获取parent元素，进行查询选择以获取children，将children转换为数组，然后对其进行迭代，一次删除一个child。

因此，让我们假设我想过滤parent的子级以仅获取.target类的元素：

const parent = document.getElementById('#parent')
const children = parent.querySelectorAll('.target')

[...children].forEach(child => parent.removeChild(child)

您还可以对其进行抽象处理，以使其具有接收给定parent和一组children的通用函数：

const removeChildren = (parent, ...children) => children.forEach(child => parent.removeChild(child))
// ...
const parent = document.getElementById('parent');
const targets = parent.querySelectorAll('.target');
removeChildren(parent, ...targets);

使用forEach()代替map()很重要，因为removeChild()实际上返回一个值-您刚删除的那个节点。我并不认为返回这样很有趣，因此更喜欢什么也不返回。

如何根据某些条件（例如标签，

4 个答案: