Browser Inconsistencies with jQuery :empty. How do I get around this?

Question

Hi there!

Firefox and Internet Explorer seem to handle the :empty modifier in jQuery differently.

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.

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:

$(".item:empty").remove();

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.

So I tried trimming it too:

if($.trim($(".item").text()) == "") { $(".item").remove(); }

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

My markup is like so:

<div class="item"></div> <div class="item">hello 3</div>

I want to get rid of all DIV's with nothing in them.

Any ideas?

Many thanks, Michael.

Answer 1

It's okay now.

What I did in the end was this:

$(".item").each(function(myItem){ var myItem = jQuery.trim($(this).text()); if(myItem.length == 0) { $(this).remove(); } })

Hope it helps someone in future.