CODEWITHSUNDEEP
javascriptjqueryhtml
Nishant Nawarkhede
Nishant Nawarkhede

Reputation: 8400

Hide div if the ul is empty

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 ?

Upvotes: 2

Views: 5380

Answers (9)

xiidea
xiidea

Reputation: 3394

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

Upvotes: 1

Samiul Amin Shanto
Samiul Amin Shanto

Reputation: 1397

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

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

:)

Upvotes: 2

sanjeev
sanjeev

Reputation: 4621

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

Upvotes: 1

system7
system7

Reputation: 127

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

Upvotes: 0

Jai
Jai

Reputation: 74738

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.

Upvotes: 2

Martijn
Martijn

Reputation: 16103

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

Upvotes: 0

Xdevelop
Xdevelop

Reputation: 206

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 comment and discomment foo(); line.

Upvotes: 1

Kunal Jain
Kunal Jain

Reputation: 1

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

Upvotes: -3

Saritha.S.R
Saritha.S.R

Reputation: 800

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

Sample Code

Upvotes: -2

Related Questions