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?

Possible duplicate of Hiding an element that contains only spaces using CSS — Eugen Konkov
– Eugen Konkov, Commented Apr 11, 2018 at 9:59

Pointy · Accepted Answer · 2013-09-06 23:59:59Z

7

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();

edited Sep 6, 2013 at 23:59

answered Sep 6, 2013 at 23:45

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Pointy Over a year ago

It will only hide the element if the .filter() function thinks that the element contains nothing but white space.

Pointy Over a year ago

@SnowJim oops sorry; the regex needs a "g" - updating answer

Pointy Over a year ago

@Lucio yes I just figured that out :) Thanks!!

Lucio Over a year ago

@SnowJim You should mark this answer as accepted. It is working

Jake Over a year ago

@Pointy, the original answer was only incorrect in that it had !! in the return statement instead of !. The g in the regex is not necessary. I assume there is no special jQuery selector to match an element which has only whitespace content in text nodes.

|

Banshee · Accepted Answer · 2013-09-06 23:59:49Z

4

This solved the problem.

$(document).ready(function () {
                if($('#rightCon').text().trim().length < 1)
                {$('#rightCon').hide();}
            });

answered Sep 6, 2013 at 23:59

Banshee

15.9k41 gold badges139 silver badges239 bronze badges

Comments

Darren · Accepted Answer · 2013-09-06 23:45:50Z

0

Your div is not actually empty (It contains whitespace). So the selector $("#rightCon:empty") will never evaluate and hide the div.

Since HTML elements should be unique, you can safely assume that you can select the correct element via:

var rightCon = $("#rightCon");

You can then hide the element via:

right.hide();

Or

 $("#rightCon").hide();

answered Sep 6, 2013 at 23:45

Darren

71.2k24 gold badges141 silver badges146 bronze badges

5 Comments

Banshee Over a year ago

Yes, but that means it will always be hidden, I need it to only be hidden when it got whitespaces.

Pointy Over a year ago

That will hide the element whether it has stuff in it or not.

Lucio Over a year ago

You should use Regular Expressions.

cgatian Over a year ago

Damn didnt know the pseudo selector existed

Darren Over a year ago

@SnowJim - you can use a regular expression or use val to see if the div contains any content.

Collectives™ on Stack Overflow

How to hide HTML element containing only spaces using jQuery?

3 Answers 3

6 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related