I have the following setup:

      <div id="whatever">
           <!-- Here some dynamic divs will be loaded -->
      </div>

I need to know when the "whateverdiv" has nothing inside. The catch is that when I say nothing I mean if user sees nothing. So if inside the div something like

      <div style="display: none">LOOOONG TEXT</div>

is loaded I consider it empty.

If is full of blank spaces is also empty, etc... if user doesn't see anything in it is empty.

Since there are too many cases to cover (content with height 0, content with display none, blank spaces, tabs, hidden inputs etc... almost anything may be loaded there depending on situations) I tried to use the height attribute to see if has content (the div expands depending on content). This idea worked ok but now I have another problem: I must add display: none on it sometimes. When I do that the height is always load as 0. I can't use visibility because div has 10px padding that I don't want to see when is not shown. So I'm back to square one... finding some sort of way to see if a div is empty in all that cases.

Any idea how should I do that?

I have the following setup:

      <div id="whatever">
           <!-- Here some dynamic divs will be loaded -->
      </div>

I need to know when the "whateverdiv" has nothing inside. The catch is that when I say nothing I mean if user sees nothing. So if inside the div something like

      <div style="display: none">LOOOONG TEXT</div>

is loaded I consider it empty.

If is full of blank spaces is also empty, etc... if user doesn't see anything in it is empty.

Since there are too many cases to cover (content with height 0, content with display none, blank spaces, tabs, hidden inputs etc... almost anything may be loaded there depending on situations) I tried to use the height attribute to see if has content (the div expands depending on content). This idea worked ok but now I have another problem: I must add display: none on it sometimes. When I do that the height is always load as 0. I can't use visibility because div has 10px padding that I don't want to see when is not shown. So I'm back to square one... finding some sort of way to see if a div is empty in all that cases.

Any idea how should I do that?

• javascript
• jquery
• html
• css

• Why don't you set display to block first, test as you would normally, using the height, then set display to none again. – Dexter Huinda Commented Jul 9, 2012 at 9:54

3 Answers 3

var d = $('#myDiv');
var empty = d.text().trim().length === 0 || !d.is(':visible');

This one should work. http://jsfiddle/fedmich/SmRnT/

I'm cleaning the html ments via Regex

 $(function() {
    var w = $('#whatever').clone();
    w.find(':hidden').remove();

    var html = w.html();
    html = html.replace(/<!--.*-->/g,'')
    html = $.trim(html);

    alert( html );
});​

To summarize

 clone the object
 remove hidden elements
 remove html ments
 $.trim(  )

If you dont count whitespace as if something is not empty:

$("selector").is(":empty")

OR

$("selector").contens().length

Does the trick.

If you dont want to count text nodes as empty:

$("selector").children().length

See:
http://api.jquery./empty-selector/
http://api.jquery./contents/
http://api.jquery./children/