Here is my html,

<div id="personaldetails">

    <ul>
        <li class="clear"></li> 
    </ul>
    <ul>
        <li class="clear"></li> 
    </ul>
</div>

I want to hide div personaldetails when all the ul inside in div is empty.

If the ul is having element <li class="clear"></li> then the ul is considered as to be empty.

How to do this using Jquery ?

Here is my html,

<div id="personaldetails">

    <ul>
        <li class="clear"></li> 
    </ul>
    <ul>
        <li class="clear"></li> 
    </ul>
</div>

I want to hide div personaldetails when all the ul inside in div is empty.

If the ul is having element <li class="clear"></li> then the ul is considered as to be empty.

How to do this using Jquery ?

• javascript
• jquery
• html

• @chris97ong You mean using only CSS, i don't see how you'll do it here?! – A. Wolff Commented Apr 1, 2014 at 9:59
• If your list is empty then your div should have height 0. Just remove the default style for <ul> – Fabrizio Calderan Commented Apr 1, 2014 at 10:00
• If your ul has 2 li: one is with class clear and the other contain something then how? – Felix Commented Apr 1, 2014 at 10:01
• @Felix If ul has 2 li with with class clear and other contain something different then the ul is not considered to be empty. – Nishant Nawarkhede Commented Apr 1, 2014 at 10:04

9 Answers 9

You can try this:

$('#personaldetails').find('ul').each(function(){
   var txt = $("li", this).text();
   if(txt.length <= 0){
      $(this).hide();
   }
});
if(!$('#personaldetails').find('ul:visible').length){
    $('#personaldetails').hide();
}

Updated Fiddle

And to me you should hide all ul, if no ul are visible then you can hide the #personaldetails div.

Even one of answer is already accepted, I think it can be simple as:

if($.trim($("#personaldetails").text()) == '') {
    $("#personaldetails").hide();
}

:)

Take a look at that code:

function foo(){
    var all_li_clear = true;
    $("#personaldetails > ul > li").each(function(){
        if(!$(this).hasClass("clear")){
            all_li_clear = false;
            break; // No need to continue now
        }
    });

    if(all_li_clear){
        $("#personaldetails").hide();
    }
}

You can see a fiddle example there, just ment and disment foo(); line.

Javascript solution:

This will only hide the div if all li have clear class

        $(function() {
         emptyLi = $('#personaldetails ul li').filter(function(){

            /*if($(this).hasClass('clear')){
             return true;
            }else{
             return false;
            }*/
            return $(this).hasClass('clear');

         }).length;

         if($('#personaldetails ul li').length == emptyLi){

           $('#personaldetails').css('display','none');
         }
        });

CSS:

This will hide the li with class clear, so if you not fixed height of ul or li and don't have padding , margin given to ul,li your div personaldetails will get hidden automatically when all li element have class clear

        #personaldetails ul li.clear{
          display:none;
        }

-UPDATED-

You can use following code if you are deciding empty class based on clear class.

if($("#personaldetails ul li:not(.clear)").length == 0) {
    $("#personaldetails").hide();
}

Or if you are looking for the empty div then you can just use the shortest code given by @Samiul Amin Shanto Like:

if($.trim($("#personaldetails").text()) == '') {
    $("#personaldetails").hide();
}

Explanations

Method1:

$("#personaldetails ul li:not(.clear)") This code find all li without the clear class. Then if no such li found, just hide the div. Fiddle

Method2:

$("#personaldetails").text() this code return innerHTML text striping all html tags. So no meter what the div contain ul, li or anything else, this will return the plain text content of the div, then striping any white space we can determine if the div is empty. If your intention is to hide the empty div not hiding the div which contain empty Ul this should be your choice.

This asumes that if you have the same amount of li's with the class clear, as there are ul's, they're all empty

var $wrapper = $('#personaldetails');
if(  $wrapper.find('ul').length=== $wrapper.find('li.clear').length){ 
    $wrapper .hide(); 
}

Everybody's fiddling examples :)

$(function($) {
    $cnt = 0;
    $('.personalDetails ul li').each(function() {
        if($(this).hasClass('clear')) $cnt++;
    });
    if($('.personalDetails ul li').length == $cnt) $('.personalDetails').hide();
});

$("ul li:empty").closest('div#personaldetails').hide();

Sample Code

#personaldetails ul li.clear{
    visibility:hidden;
}