使用类树删除特定的HTML元素

Question

如何使用vanilla JS查找和删除父类具有类Y的特定类X的元素？

例。特定

<div class="likes noise1">
   <div class="count noise2">
       42
   </div>
</div>
<div class="retweets noise3">
   <div class="count noise4">
       7
   </div>
</div>
<div class="messages noise5">
   <div class="count noise6">
       2
   </div>
</div>

我想删除前两个“.count”元素（“.likes”和“.retweets”的孩子）。然而，消息div应保持不变。

我已经尝试使用querySelectorAll返回一个冻结的NodeList并迭代它，但没有成功。

Answer 1

您可以循环遍历所有元素以检查Element.className的Node.parentNode属性，以删除元素，如下所示：

document.querySelectorAll('.count').forEach(function(el){
  var classN = el.parentNode.className
  if(classN.includes('likes') || classN.includes('retweets'))
    el.remove();
});

<div class="likes">
   <div class="count">
       42
   </div>
</div>
<div class="retweets">
   <div class="count">
       7
   </div>
</div>
<div class="messages">
   <div class="count">
       2
   </div>
</div>

或者：您可以简单地将两个类都指定为选择器的一部分，在这种情况下，您不需要检查parentNode，因为选择器将仅为您提供父项内的元素：

document.querySelectorAll('.likes > .count, .retweets > .count').forEach(function(el){
  el.parentNode.remove();    
});

<div class="likes">
   <div class="count">
       42
   </div>
</div>
<div class="retweets">
   <div class="count">
       7
   </div>
</div>
<div class="messages">
   <div class="count">
       2
   </div>
</div>

Answer 2

另一种替代方法，就是已经给出的另一种方法是保留一个css选择器的数组，你需要找到你的目标。从那里开始，使用querySelector只是一个简单的问题，结果仍然存在，尽管是循环。

	"use strict";
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);

function onWindowLoaded(evt)
{
	var tgtSelectors = [ '.likes > .count', '.retweets > .count' ];
	tgtSelectors.forEach(removeBySelector);
}

function removeBySelector(curSelector)
{
	var tgt = document.querySelector(curSelector);
	while (tgt != undefined)
	{
		tgt.remove();
		tgt = document.querySelector(curSelector);
	}
}

<div class="likes">
	<div class="count">42</div>
</div>

<div class="retweets">
	<div class="count">7</div>
</div>

<div class="messages">
	<div class="count">2</div>
</div>