Hide div's if they are empty

Answer 1

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

Answer 2

Here is a CSS3 solution for anyone who is interested

div:empty {
  display:none;
}

Answer 3

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

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

Answer 4

replace display:block; by display: none;

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

Answer 5

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

Answer 6

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.