html 如何删除不包含匹配的内部元素ClassName的元素？

uyhoqukh 于 2023-01-07 发布在其他

关注(0)|答案(1)|浏览(133)

我试图找到一种方法来删除不包含特定类名集的列表项。
HTML（在本例中进行了简化）如下所示：

<ul class="myListItems">
  <li class="listTree">
    <a href=""> Link 1 </a>
  </li>
  <li class="listTree">
    <span class="treeIcon">&nbsp;</span>
    <a href=""> 
      <span class="draft"></span>
      <span class="redirect"></span>
      Link 2 
     </a>
  </li>
  
  <ul>
    <li class="listTree">
      <a href="">
        <span class="redirect"></span>
        Link 3
      </a>
    </li>
  </ul>
</ul>

我想要做的是删除所有不包含<span class="redirect">或<span class="draft">的元素

Html

来源：https://stackoverflow.com/questions/74998637/how-can-i-delete-elements-which-do-not-contain-matching-inner-element-classname

1条答案

按热度按时间

pzfprimi1#

使用li.querySelector()来测试li是否包含一个匹配选择器的元素，也可以使用它来测试li是否包含你想要保留的类。

document.querySelectorAll("li").forEach(li => {
  if (!(li.querySelector(".draft") || li.querySelector(".redirect"))) {
    li.remove();
  }
});

<ul class="myListItems">
  <li class="listTree">
    <a href=""> Link 1 </a>
  </li>
  <li class="listTree">
    <span class="treeIcon">&nbsp;</span>
    <a href="">
      <span class="draft"></span>
      <span class="redirect"></span> Link 2
    </a>
  </li>

  <ul>
    <li class="listTree">
      <a href="">
        <span class="redirect"></span> Link 3
      </a>
    </li>
  </ul>
</ul>

赞(0）回复(0）举报 2023-01-07

我来回答

html 如何删除不包含匹配的内部元素ClassName的元素？

1条答案

相关问题

热门标签

最新问答