Question

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?

Answer 1

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

I’m cleaning the html comments 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 comments
 $.trim(  )