Browser Inconsistencies with jQuery :empty. How do I get around this?
<p>Firefox and Internet Explorer seem to handle the :empty modifier in jQuery differently.</p>

<p>IE funnily enough, works how I want it to, but Firefox seems to count white space as an actual character. This therefore renders using :empty completely useless, as I can't see if a DIV is empty or not.</p>

<p>I basically have a set of DIV's with a class of item on them. I want to remove all DIV's with no content inside them, though white space may be present. I tried using this:</p>

<p><code>$(".item:empty").remove();</code></p>

<p>However, running a check on the length of the string reveals that Firefox still thinks that in an empty DIV there are characters...even though it's just white space.</p>

<p>So I tried trimming it too:</p>

<p><code>if($.trim($(".item").text()) == "") {
$(".item").remove();
}</code></p>

<p>However, the trim function doesn't seem to have an effect on this. What now??</p>

<p>My markup is like so:</p>

<p><code>&lt;div class="item"&gt;&lt;/div&gt;
&lt;div class="item"&gt;hello 3&lt;/div&gt;</code></p>

<p>I want to get rid of all DIV's with nothing in them.</p>

<p>Any ideas?</p>

<p>Many thanks,
Michael.</p>
