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

时间:2019-03-25 23:45:35

标签: javascript html

如何使用普通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并对其进行迭代,但没有成功。

2 个答案:

答案 0 :(得分:2)

您可以遍历所有元素以检查Element.classNameNode.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>

答案 1 :(得分:0)

除了已经给出的方法以外,另一种选择是保留一个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>