Check if the content of a DIV is empty in jQuery

Question

How do I use jQuery to check to see if the content of a <div> is empty?

I tried this and is doesn't seem to be printing the correct values.

...
var unframed_items = $("#unframed-items");
alert(unframed_items.html().length);
...
<div id="unframed-items"> </div>
...

Answer 1

If you mean really empty, use the empty-selector^[docs] :

alert( !!$("#unframed-items:empty").length )

or

alert( $("#unframed-items").is(':empty') )

If you consider whitespace-only to be empty, then use the jQuery.trim()^[docs] method:

alert( !$.trim( $("#unframed-items").html() ) );

Answer 2

<div id="portfolio"><!--portfolio-->
<div id="portfolio-works"><!--portfolio-works-->
    <div class="portfolio-works-container"></div>
</div><!--/portfolio-works-->

 $(document).ready(function(){
    if($('div.portfolio-works-container').is(':empty')){
        $('div#portfolio').hide();
    }
});

Answer 3

Use $('#elementId').is(':empty').