如何隐藏内部.product-item-link内容为空的<li>元素？

数据老陈

2026-5-6

这好办！我给你两种靠谱的方案，不管页面里有多少这类<li>元素，都能自动把包含空链接的条目隐藏掉，完全不用指定它们的具体位置：

方法一：纯CSS实现（推荐，简洁高效）

现在主流浏览器都支持CSS的:has()选择器了，用它可以直接定位到包含空链接的父级<li>，代码非常简洁：

/* 隐藏所有包含空.product-item-link的目标li元素 */
li.item.product.product-item.category:has(.product-item-link:empty) {
  display: none;
}

补充说明：

:empty选择器会匹配完全没有内容的链接（连空格都没有的<a>标签）。如果你的空链接里可能包含空格这类空白字符，那JS方法会更精准；如果都是像示例里那样完全空的链接，这个CSS方案足够用。

方法二：JavaScript实现（兼容旧浏览器/复杂场景）

如果需要兼容不支持:has()的旧浏览器，或者空链接里可能有空格等空白字符，用JS处理会更灵活：

// 等DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有产品链接元素
  const productLinks = document.querySelectorAll('.product-item-link');
  
  productLinks.forEach(link => {
    // 去除文本前后空格后检查是否为空
    if (!link.textContent.trim()) {
      // 找到最近的目标li元素（精准匹配类名）
      const targetLi = link.closest('li.item.product.product-item.category');
      if (targetLi) {
        targetLi.style.display = 'none';
      }
    }
  });
});