Hide div's if they are empty

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

Do you have access to server logic?

Else client side you could do something like:

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