I have a whole bunch of list items, and within them are more list items.

For all <li id="pany-name" class="hide">, I want to detect whether this element is empty.

If it is empty, I want to hide ALL <li class="hide"> within the direct parent <ul></ul> element.

<ul>
    <li>
        <ul class="greyul">
            <li>Location:</li>
            <li class="hide">Company:</li> <!-- DONT HIDE -->
        </ul>
        <ul class="whiteul">
            <li>Melbourne</li>
            <li id="pany-name" class="hide"></li> <!-- HIDE -->
            <li class="hide">Sydney</li> <!-- HIDE ALSO-->
        </ul>
    </li>
</ul>

I have a whole bunch of list items, and within them are more list items.

For all <li id="pany-name" class="hide">, I want to detect whether this element is empty.

If it is empty, I want to hide ALL <li class="hide"> within the direct parent <ul></ul> element.

<ul>
    <li>
        <ul class="greyul">
            <li>Location:</li>
            <li class="hide">Company:</li> <!-- DONT HIDE -->
        </ul>
        <ul class="whiteul">
            <li>Melbourne</li>
            <li id="pany-name" class="hide"></li> <!-- HIDE -->
            <li class="hide">Sydney</li> <!-- HIDE ALSO-->
        </ul>
    </li>
</ul>

• javascript
• jquery
• html

• Where are the divs in your html? – Pavan Teja Commented Sep 1, 2015 at 4:18
• 1 possible duplicate of Hide empty <li> – Brownman Revival Commented Sep 1, 2015 at 4:26
• you have used multiple id="pany-name" in your HTML, which is not a correct prodedure. – rrk Commented Sep 1, 2015 at 4:29
• jsfiddle/kxzLfc5L/2 is this what you are looking for? – rrk Commented Sep 1, 2015 at 5:14

6 Answers 6

You can use simple css selector :empty

.hide:empty{
    display: none;
}

Using jQuery:

$('.hide:empty').hide();

If you want to hide parent div, then you may use:

$('.hide:empty').parent().hide();

As per your updated question, you can use not selector and contains selector like this:

$('.hide:not(:contains("Company:"))').hide();

You have used multiple id="pany-name" in your HTML, which is not a correct procedure. Change them to class.

You can use each() function to iterate.

$('li.pany-name').each(function(){
    if( $.trim($(this).text()) == '')
        $(this).parents('li:first').find('.hide').hide();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li>
    <ul class="greyul">
      <li>Location:</li>
      <li class="hide">Company:</li>
    </ul>
    <ul class="whiteul">
      <li>Melbourne</li>
      <li class="pany-name hide">display;none; on all items with the class 'hide' within THIS PARENT LIST item only, if this li has no content</li>
    </ul>
  </li>

  <li>
    <ul class="greyul">
      <li>Location:</li>
      <li class="hide">Company:</li>
    </ul>
    <ul class="whiteul">
      <li>Melbourne</li>
      <li class="pany-name hide"></li>
    </ul>
  </li>

  <li>
    <ul class="greyul">
      <li>Location:</li>
      <li class="hide">Company:</li>
    </ul>
    <ul class="whiteul">
      <li>Melbourne</li>
      <li class="pany-name hide">ABC</li>
    </ul>
  </li>

</ul>

Is this what you're going for?

EDIT: fixed answer thanks to @patlkli and @Sphinxxx

$('li#pany-name.hide:empty').hide().siblings('li.hide').hide();

This hides all empty <li id="pany-name" class="hide"> elements, then hides any neighboring/sibling <li class="hide"> element, regardless of whether or not they are empty as well.

http://jsfiddle/kxzLfc5L/4/

$('ul li').each(function() { 
    if($(this).html()=="") {
        $(this).addClass('hide'); 
    } else {
        $(this).removeClass('hide'); 
    }
});

.hide {
    dispaly:none;
}

Here is a pure javascript solution:

First check for lists which contain empty items and add class 'hasEmptyItems' to them:

var emptyItems = document.querySelectorAll('.hide');
for (var i = 0; i < emptyItems.length; i++) {
    if(emptyItems[i].innerHTML.trim() === '') {
        emptyItems[i].parentNode.classList.add('hasEmptyItems');
        break; //stop looping as soon as one empty item is found
    }     
}

Next use CSS to hide elements with the 'hide' class within lists with the class 'hasEmptyItems'

.hasEmptyItems .hide {
    display: none;
}

FIDDLE

var emptyItems = document.querySelectorAll('.hide');
for (var i = 0; i < emptyItems.length; i++) {
    if(emptyItems[i].innerHTML.trim() === '') {
        emptyItems[i].parentNode.classList.add('hasEmptyItems');
        break; //stop looping as soon as one empty item is found
    }     
}

.hasEmptyItems .hide {
  display: none;
}

<ul>
  <li>
    <ul class="greyul">
      <li>Location:</li>
      <li class="hide">Company:</li>
      <!-- DONT HIDE -->
    </ul>
    <ul class="whiteul">
      <li>Melbourne</li>
      <li id="pany-name" class="hide">  </li>
      <!-- HIDE -->
      <li class="hide">Sydney</li>
      <!-- HIDE ALSO-->
    </ul>
  </li>
</ul>

Simple and to the point. :)

<!-- Script to hide the blank/empty li--> 
<script>
$(document).ready(function(){ $('li').filter(function(){ 
    return $.trim($(this).html()) == '';}).hide() });
</script>