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

开发者_JAVA技巧<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?

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

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

Here is a CSS3 solution for anyone who is interested

div:empty {
  display:none;
}

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.

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

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.

$('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();

Do you have access to server logic?

Else client side you could do something like:

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

replace display:block; by display: none;

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

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

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();