如何隐藏不包含文本的 DOM 元素？答案

【问题标题】：How can I hide a DOM element that contains no text?如何隐藏不包含文本的 DOM 元素？
【发布时间】：2015-03-19 07:19:09
【问题描述】：

我想知道如何在 JavaScript 中隐藏一个不包含任何文本的 DOM 元素，例如：

<ul>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li></li> <!-- Element to hide -->
</ul>

我目前写过：

var point = document.getElementsByTagName("li");
for(var i = 0; i < point.length; i++){
   if(point[i].text==""){
      point[i].style.display = "none";
   }
}

谢谢！

【问题讨论】：

用points[i].innerHTML代替points[i].text。
document.querySelectorAll("li:empty") 让您不必循环和比较
或者更好，甚至不要使用JS，使用CSS：li:empty{display:none;}
感谢您的所有回答，但我只使用 Javascript。

标签： javascript html events dom

【解决方案1】：

为什么不用jQuery，它会消除浏览器的差异：

$('li').each(function (){
    if($(this).html()==="") {
        $(this).css({"display":"none"});   
    }
});

【讨论】：

对不起，我只使用 Javascript。但是当我学习 jQuery 时，我会数数。
好吧，我强烈推荐使用 jQuery，它让生活更轻松，语法也不像看起来那么可怕:)

【解决方案2】：

使用innerHTML 属性并在再次检查之前先删除空格。

 if(!/[\S]/.test(point[i].innerHTML)) { 
    point[i].style.display = "none";
 }

【讨论】：

innerText 是非标准的，你想要textContent
@elclanrs 我的错.. 已修复。
谢谢！我使用了以前的解决方案，它可以工作！