Question

如何使用普通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>

OR：您可以简单地指定两个类作为选择器的一部分，在这种情况下，您无需检查 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>

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

2 个答案: