CODEWITHSUNDEEP
jquery
Blankman
Blankman

Reputation: 267010

How can I hide divs if they are empty?

I have some divs that maybe be empty (depending on server-side logic).

<div id="bar">

<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>

</div>

If they don't have any html inside the div's (with class section), I just want to hide them.

How can I do this?

Upvotes: 19

Views: 59064

Answers (10)

samjco-com
samjco-com

Reputation: 409

$('div.section:empty').css("display", "none");

Upvotes: 0

TarranJones
TarranJones

Reputation: 4242

There are many options, it all depends on what your preferences are. The more compact the answer the less readable it becomes, is speed important, and how effective should the empty function be, an element containing no nodes is not the same as an :empty element.

Most compact / Slow / Very Effective / readable / generic selector

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

Very compact / little faster (still Slow) / Very Effective / readable / less generic selector

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

Compact / Faster / Very Effective / readable / specific selector

$("#bar").find('div.section:empty').hide();

I'm Going to stick with the more specifc selector as it is faster.

Less Compact / Even Faster / Very Effective / still less readable

$("#bar").find('div.section').filter(function(i,elem) {

    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeType < 6 ) {
            return false;
        }
    }
    return true;

}).hide();

Still Less Compact / Even Faster Still / Very Effective / still less readable

$("#bar").find('div.section').each(function(i,elem){

    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeType < 6 ) {
            return;
        }
    }
    $(this).hide();        
})

Compact-ish / Much Faster / Less Effective / less readable

// Faster Still but less precise
$("#bar").find('div.section').filter(function() {
    return !this.firstChild; 
}).hide();

Less Compact / Much Faster Still / Less Effective / less readable

$("#bar").find('div.section').each(function(){
    if(!this.firstChild){
        $(this).hide();            
    }           
})

Effective Solution

The more Effective Solutions use the same approach used by the 'empty' jquery filter, it tries to replicate the functionality of the CSS3 :empty pseudo-class by taking into account the nodeType. For example if a child element had nodeType == COMMENT_NODE(<!-- -->) then the parent will still be seen as empty.

All of these Approaches could be improved by replacing the .hide() with .addClass('hide') and adding a .hide class to your CSS.

<style>
    .hide {
        display:none;
    }
</style>

but if this sounds like an appropriate solution for you then @elliot-wood 's CSS3 Answer is probably better suited.

My personal preference

$("#bar").find('div.section').filter(function() {
    return !this.firstChild; 
}).hide();

Even though this approach doesn't check nodeType and it uses .filter() method rather than the faster .each(). It is just a more compact and readable solution.

Upvotes: 6

Raynos
Raynos

Reputation: 169391

Why does nobody use .filter ?

$("div.section").filter(function() {
    return this.childNodes.length === 0;
}).hide();

This is a more elegant solution compared to using .each.

Upvotes: 4

Jussi Palo
Jussi Palo

Reputation: 955

I used the filtering answer, but this.childNodes.length kept returning 1 also when there was no visible content, so ended up combining filter with trim.

$("div").filter(function() {
    return j(this).text().trim() === "";
}).hide();

Upvotes: -1

Elliot Wood
Elliot Wood

Reputation: 964

Here is a CSS3 solution for anyone who is interested

div:empty {
  display:none;
}

Upvotes: 27

RVC
RVC

Reputation: 69

If div contains white-space or line breaks then this code may be helpful... 

$(document).ready(function() {
   str = $('div.section').text();
   if($.trim(str) === "") {
     $('div.section').hide();
   }
});

Upvotes: 4

gen_Eric
gen_Eric

Reputation: 227240

jQuery has a :empty selector. So, you can simply do:

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

Upvotes: 44

Michael Laffargue
Michael Laffargue

Reputation: 10294

Do you have access to server logic?

Else client side you could do something like:

$(function() {
$('div').each(function() {
       if ($(this).html()=="") {
             $(this).hide();
       }
    }); 
});

Upvotes: 1

user657496
user657496

Reputation: 

$('div').each(function() {
if($(this).html().size() == 0) $(this).remove();
});

If you want to use the divs later on in the same page, it's better to use $(this).hide(); instead of $(this).remove(); as the divs will be deleted if you use remove();

Upvotes: 1

Thew
Thew

Reputation: 15959

replace display:block; by display: none;

edit: Oh, i saw you wanted to use jQuery, then use .hide(): http://api.jquery.com/hide/

Upvotes: 0

Related Questions