How to hide HTML element containing only spaces using jQuery?

Question

I have the following HTML :

<div id="rightCon">




                    </div>

And then I have the following script at the top :

$('#rightCon:empty').hide();

Why is the div not hiding? I can see that there is some spaces(that I can´t get ridoff) but does that really matter? How do I remove/hide this div when its empty with only spaces?

Answer 1

Your element appears to have a bunch of white space, which will give it a text node. It won't be matched by :empty for that reason.

You could try finding the element and checking it's contents explicitly:

$('#rightCon').filter(function() {
  var text = $(this).text().replace(/\s*/g, '');
  return !text;
}).hide();