If li is empty, hide excluding span property in jQuery

Question

I have various products in which we list fields/properties in a list. Sometimes some of the properties are empty. When I try to hide these with jQuery, the fact that the li element contains the field name is causing the script not to execute.

How can I hide the entire li (in this case: barcode, notes) whilst the span fields are present?

   $('ul li').each(function() {
    if ($(this).text().length < 1)
        $(this).hide();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bookprofile">
    <li class="barcode"><span style="color:#333;font-weight:bold">Barcode: </span></li>
    <li class="bookauthor"><span style="color:#333;font-weight:bold">Book Author: </span>Entry</li>
    <li class="format"><span style="color:#333;font-weight:bold">Format: </span>Entry</li>
    <li class="pubdate"><span style="color:#333;font-weight:bold">Publication Date: </span>Entry</li>
    <li class="publisher"><span style="color:#333;font-weight:bold">Publisher: </span>Entry</li>
    <li class="notes"><span style="color:#333;font-weight:bold">Notes: </span></li>
    <li class="rank"><span style="color:#333;font-weight:bold">Rank: </span>Entry</li>
    </ul>

If you are doing it by some coding then you can add class on `li` if entry is empty for example adding hide class on `li` if entry is empty. — Chilll007, Apr 17 '18 at 11:33
Duplicate - https://stackoverflow.com/questions/11561211/hide-div-if-it-contains-no-text. Check this out: https://jsfiddle.net/486yokcr/2/ — Luís P. A., Apr 17 '18 at 11:35
Possible duplicate of [hide div if it contains no text](https://stackoverflow.com/questions/11561211/hide-div-if-it-contains-no-text) — Calvin Nunes, Apr 17 '18 at 11:38
`$(this).clone().children().remove().end().text();` will get just the text inside `li`, it will do the work you need — Calvin Nunes, Apr 17 '18 at 11:40
I’d simply go with `if ($(this)[0].childNodes.length < 2)` here ... — CBroe, Apr 17 '18 at 11:50

score 1 · Accepted Answer · answered Apr 17 '18 at 11:38

You could enclose the properties in an extra element:

$('.bookprofile li').each(function() {
  if ($(this).find('.properties').text().length < 1)
    $(this).hide();
});

.bookprofile .barcode .label {
  color: #333;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="bookprofile">
    <li class="barcode"><span class="label">Barcode: </span><span class="properties"></span></li>
    <li class="bookauthor"><span class="label">Book Author: </span><span class="properties">Entry</span></li>
    <li class="format"><span class="label">Format: </span><span class="properties">Entry</span></li>
    <li class="pubdate"><span class="label">Publication Date: </span><span class="properties">Entry</span></li>
    <li class="publisher"><span class="label">Publisher: </span><span class="properties">Entry</span></li>
    <li class="notes"><span class="label">Notes: </span><span class="properties"></span></li>
    <li class="rank"><span class="label">Rank: </span><span class="properties">Entry</span></li>
</ul>

score 1 · Answer 2 · answered Apr 17 '18 at 11:44

I created the demo which will solve your issue

link for https://codepen.io/chirag007/pen/bMbWyR

this is what I changed to get it work.

I got this answer from here Get the text after span element using jquery

$('ul li').each(function() {
  var a = $(this).contents().filter(function() {
      return this.nodeType == 3;
  }).text();
  console.log(a);
  if(a == ''){
   $(this).addClass('hide');
  }
});

Narendra Jadhav · Answer 3 · 2018-04-17T13:30:06.403

You are using $(this).text().length < 1 so it will always false because you have provided like this

<span style="color:#333;font-weight:bold">Barcode: </span>

The output will be Barcode:.

Instead of this you could use one more tag inside of li tag for right side text and get that tag using $(this).find('tag_name.classname') or $(this).find('#id') and check the text of that tag if value is blank then hide the tag.

DEMO

$('ul li').each(function() {
  if (!$(this).find('span.right').text()) {
    $(this).hide();
  }
});

.lef-span {
  color: #333;
  font-weight: bold;
  margin-right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bookprofile">
  <li class="barcode"><span class="lef-span">Barcode:</span><span class="right"></span></li>
  <li class="bookauthor"><span class="lef-span">Book Author:</span><span class="right">Entry</span></li>
  <li class="format"><span class="lef-span">Format:</span><span class="right">Entry</span></li>
  <li class="pubdate"><span class="lef-span">Publication Date:</span><span class="right">Entry</span></li>
  <li class="publisher"><span class="lef-span">Publisher:</span><span class="right">Entry</span></li>
  <li class="notes"><span class="lef-span">Notes:</span><span class="right"></span></li>
  <li class="rank"><span class="lef-span">Rank:</span><span class="right">Entry</span></li>
</ul>

This is not very stable. What if a label does not contain the semicolon character? Every line would be detected as empty. — Mario Cianciolo, Apr 17 '18 at 13:03
@MarioCianciolo I have updated my answer. I have used one more tag and find that tag using class-name and checked value. — Narendra Jadhav, Apr 17 '18 at 13:31

Takit Isy · Answer 4 · 2018-04-17T11:59:59.957

Based on the same idea that N. Jadhav used,
Here is what I'll do:

$('ul li').each(function() {
  if (!$(this).html().split('</span>')[1]) {
    $(this).hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bookprofile">
  <li class="barcode"><span style="color:#333;font-weight:bold">Barcode: </span></li>
  <li class="bookauthor"><span style="color:#333;font-weight:bold">Book Author: </span>Entry</li>
  <li class="format"><span style="color:#333;font-weight:bold">Format: </span>Entry</li>
  <li class="pubdate"><span style="color:#333;font-weight:bold">Publication Date: </span>Entry</li>
  <li class="publisher"><span style="color:#333;font-weight:bold">Publisher: </span>Entry</li>
  <li class="notes"><span style="color:#333;font-weight:bold">Notes: </span></li>
  <li class="rank"><span style="color:#333;font-weight:bold">Rank: </span>Entry</li>
</ul>

I prefer to use html() instead of text(), because it's easier to understand as we actually have the html. Then, we just have to use the end tag </span> to cut the html string.

Hope it helps.

score 0 · Answer 5 · answered Apr 17 '18 at 13:07

you are doing all this in one span.. add one more span with class test.

<ul class="bookprofile">
  <li class="barcode">
     <span style="color:#333;font-weight:bold">Barcode: </span>
     <span class='test'></span></li>
  <li class="bookauthor">
     <span style="color:#333;font-weight:bold">Book Author: </span>
     <span class='test'>Entry</span></li>
  <li class="format">
     <span style="color:#333;font-weight:bold">Format: </span> 
     <span class='test'>Entry</span></li>
  <li class="pubdate">
     <span style="color:#333;font-weight:bold">Publication Date: </span>
     <span class='test'>Entry</span></li>
  <li class="publisher">
    <span style="color:#333;font-weight:bold">Publisher: </span>
    <span class='test'>Entry</span></li>
  <li class="notes">
    <span style="color:#333;font-weight:bold">Notes: </span> 
    <span class='test'></span></li>
  <li class="rank">
    <span style="color:#333;font-weight:bold">Rank: </span>
    <span class='test'>Entry</span></li>
</ul>

your Jquery will be like this

$('ul li').each(function() {
if ($(this).children('.test').text().length <1)

    $(this).hide();

});

If li is empty, hide excluding span property in jQuery

5 Answers5