如何根据其 html 内容隐藏列表项？

编程问答 2022-05-26

问题描述

<div class="icon-list-item">
  <span class="icon-list-text">One</span>
</div>
<div class="icon-list-item">
  <span class="icon-list-text">Two</span>
</div>
<div class="icon-list-item">
  <span class="icon-list-text">Three</span>
</div>
<div class="icon-list-item">
  <span class="icon-list-text">empty</span>
</div>

我想隐藏/删除任何包含“空”内容跨度的 div

我尝试了很多功能，但都没有奏效。你能帮我找到一些可以解决这个问题的JS吗？

解决方法

说明：forEach 遍历所有具有 div 类的 icon-list-item 元素。 spanChild 变量保存当前迭代的 div 元素的子元素。 remove() 函数用于从 DOM 中删除元素，当 spanChild 中的文本为 "empty" 时。

var divs = document.querySelectorAll('.icon-list-item');

divs.forEach((el) => {
  let spanChild = el.children[0];
  if(spanChild.innerText.trim() === "empty")
    el.remove(); 
});
<div class="icon-list-item">
  <span class="icon-list-text">One</span>
</div>
<div class="icon-list-item">
  <span class="icon-list-text">Two</span>
</div>
<div class="icon-list-item">
  <span class="icon-list-text">Three</span>
</div>
<div class="icon-list-item">
  <span class="icon-list-text">empty</span>
</div>

functionfunctionfunctionhidehtmljavascriptlistlist