如果隐藏一个li，则内部内容也为空

Question

嗨，我有以下html

<li class="item product product-item category">
<div class="product-item-info">
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="stackexchange.com">content</a>
</strong>
</div>
</div>
</li>

<li class="item product product-item category">
<div class="product-item-info">
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="stackexchange.com"></a>
</strong>
</div>
</div>
</li>

这里，第二个<li>是空的，因为在.product-item-link内部内容是无的。如何隐藏此<li>？

我需要Javascript或CSS方法来隐藏这一点。我不能说它是第二个<li>，因为在我的HTML中有太多的<li>，在这里写作时，我只拿这两个<li>。

Answer 1

如果您支持主流浏览器，那么您可以使用closest()方法

document.querySelector(".product-item-link:empty")
.closest(".product-item").style.display = 'none';

document.querySelector(".product-item-link:empty")
.closest(".product-item").style.display = 'none';

ol { background: #ff9999;padding: 20px;}ol li {background: #ffe5e5;padding: 10px;margin-left: 15px;}

<ol>
<li class="item product product-item category">
<div class="product-item-info">
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="stackexchange.com">content</a>
</strong>
</div>
</div>
</li>
<li class="item product product-item category">
<div class="product-item-info">
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="stackexchange.com"></a>
</strong>
</div>
</div>
</li>
</ol>

Answer 2

试试这个：-

$("li.item").each(function(){
if ($(this).find('a.product-item-link').text()=="") {
$(this).hide();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<ul id="list">
<li class="item product product-item category">
<div class="product-item-info">
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="stackexchange.com">content</a>
</strong>
</div>
</div>
</li> 
<li class="item product product-item category">
<div class="product-item-info">
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="stackexchange.com"></a>
</strong>
</div>
</div>
</li> 
</ul>

编辑：使用JavaScript

var li = document.getElementById("list").getElementsByTagName("li"); 
for(i=0;i<li.length;i++) {
var content = li[i].getElementsByTagName('a')[0].innerText; 
if (content == "") {
li[i].style.display = "none";
} 
} 

Answer 3

您应该编写一个JavaScript函数来：

1. 获取数组中的所有<li>
2. 在阵列上循环
3. 向<li>添加不包含值/文本内容的"隐藏"类
4. 将"隐藏"类添加到css中，其属性可以隐藏<li>(即不透明度(