如何根据 html 内容隐藏列表项?
How to hide a list item according to its html content?
<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>
我想hide/remove任何div包含“空”内容的跨度
我尝试了很多功能,但 none 的功能都有效。你能帮我找到一些可以解决这个问题的JS吗?
说明:forEach
遍历所有具有class icon-list-item
的div
元素。 spanChild
变量保存当前迭代的 div 元素的子元素。当 spanChild
中的文本为 "empty".
时,remove()
函数用于从 DOM 中删除元素
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>
<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>
我想hide/remove任何div包含“空”内容的跨度
我尝试了很多功能,但 none 的功能都有效。你能帮我找到一些可以解决这个问题的JS吗?
说明:forEach
遍历所有具有class icon-list-item
的div
元素。 spanChild
变量保存当前迭代的 div 元素的子元素。当 spanChild
中的文本为 "empty".
remove()
函数用于从 DOM 中删除元素
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>