javascript - 藏李空跨

我正在使用物化css。我想把所有的空跨度都藏在一个li标签里。这是屏幕截图。。。我看了一些关于如何隐藏空li和div的帖子，下面是结构

<ul id="select-options-c35dff64-99a4-b8cf-f4ed-079e4cffca0d" class="dropdown-content select-dropdown" style="width: 260px; position: absolute; top: 0px; left: 0px; display: none; opacity: 1;">
<li class=""><span> Select Parent Trade</span></li>
<li class=""><span> Civil &amp; Interior Works  </span></li>
<li class=""><span>   </span></li>
<li class=""><span>   </span></li>
<li class=""><span>   </span></li>
</ul>

当选择一个值时，类将自动填充。我只想把那些空跨的李藏起来。
我试过了

li span:empty {
    display: none;
}

$("li").each(function() {

    if(!$.trim($(this).html())) {
        $(this).hide();
    }
});

这不起作用。我试过瞄准select-dropdown类。
任何建议或解决方案都将不胜感激。

最佳答案

快到了。。。
修剪文本，然后检查其长度是否为零：

$(function() {
  $('li').each(function() {
    if( $.trim( $(this).find('span').text() ).length == 0 ) {
      $(this).hide();

      console.log( 'li number ' + ($(this).index()+1) + ' is hidden' );
    }
  });
});

li { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="select-options-c35dff64-99a4-b8cf-f4ed-079e4cffca0d" class="dropdown-content select-dropdown" style="width: 260px; position: absolute; top: 0px; left: 0px;  opacity: 1;">
  <li class=""><span> Select Parent Trade</span></li>
  <li class=""><span> Civil &amp; Interior Works  </span></li>
  <li class=""><span>   </span></li>
  <li class=""><span>   </span></li>
  <li class=""><span>   </span></li>
</ul>