CODEWITHSUNDEEP
javascripthtmlcss
The Naga Tanker
The Naga Tanker

Reputation: 441

Hide li with empty span

I'm using materialize css. I want to hide all empty span which is inside an li tag. here is the screen shoot... I have gone through some post on how to hide empty li and div. Here is the structure

<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>

The classes are automatically populated when a value is selected. I just want to hide those li with empty span.

I have tried 

li span:empty {
    display: none;
}

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

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

which does not work. i have tried targeting the select-dropdown class. Any advice or solution would be much appreciated.

enter image description here

Upvotes: 1

Views: 2042

Answers (6)

user9843546
user9843546

Reputation:

I have a situation like this, I need to be able to display: none; -webkit-flex:none; on an li that contains an empty a tag like in this example. 

<ul class="social-menu">
 <li><a href="https://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
 <li><a></a></li>
 <li><a href="https://plus.google.com/"><i class="fa fa-google-plus"></i></a></li>
</ul>

Im not sure Im seeing a solution I suppose but this seems like the most relevant post for it here. Any other thoughts on this example.

Upvotes: 0

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 642

$("li").each(function(index,key) {
  if($(this).find('span').text() == ""){
    $(key).hide();
  }
});
<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>

Upvotes: 0

cнŝdk
cнŝdk

Reputation: 32145

You can use :empty selector in your condition like this:

$("li").each(function() {
  if ($(this).find("span:empty").length > 0) {
    $(this).hide();
  }
});

Demo:

$("li").each(function() {
  if ($(this).find("span:empty").length > 0) {
    $(this).hide();
  }
});
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>

Note:

Notice that the spaces in the span elements should be trimmed, otherwise span:empty won't match the span.

Upvotes: 0

user4602228
user4602228

Reputation:

This doesn't require jquery or trimming...

var spans = document.querySelectorAll('span');

[].map.call(spans,function(n){
   !n.innerText && (n.parentElement.style.display = 'none');
})

// using ES6 can be even easier
for( n of [...spans] )
  !n.innerText && (n.parentElement.style.display = 'none');
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>

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Almost there...

Trim the text, and then check if its length is zero:

$(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>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

You need to check the text instead of html

$("li").each(function() {
    if($(this).text().trim().length) {
        $(this).hide();
    }
});

If there can other nodes than span then directly check the text of span

$("li").each(function() {
    if($(this).find( "span" ).text().trim().length) {
        $(this).hide();
    }
});

Upvotes: 2

Related Questions