Javascript hide div (is:empty) issue

Question

Have some code to hide a div, if it's contents are empty. This SHOULD work...its' worked before. Am I missing something obvious here? The div class = "msgalert"

$(document).ready(function () {
    if ($('.msgalert').is(':empty')) {
        $(".msgalert").css({'display':'none'});
    }
});

The corresponding CSS is:

.msgalert { border: 1px solid #eac572; background-color: #ffe9ad; }

Please help! Thanks :)

:empty means absolutely no content, including whitespace, so make sure the elements are actually empty. — cliffs of insanity
– cliffs of insanity, Commented May 18, 2012 at 20:18
Of course it doesn't work. You included HTML tags in the JavaScript. jsfiddle.net/jSYC3/5 So was the actual issue that you had whitespace inside the element, as I see you do in the demo? — cliffs of insanity
– cliffs of insanity, Commented May 19, 2012 at 23:04

Elliot Bonneville · Accepted Answer · 2012-05-18 20:29:51Z

3

Try checking if the length of the html() of .msgalert is 0 instead of checking if it's :empty, like this:

if ($.trim($('.msgalert').html()).length == 0) {

You'll want to trim the html() to account for the whitespace as well.

edited May 18, 2012 at 20:29

answered May 18, 2012 at 20:19

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

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

15 Comments

Selvakumar Arumugam Over a year ago

I like this instead of :empty selector +1

cliffs of insanity Over a year ago

Why would this provide a different result from :empty?

Elliot Bonneville Over a year ago

text() doesn't take into account whitespace, I believe. Making a fiddle to test it now...

cliffs of insanity Over a year ago

It does. Whitespace is text too. ;) You need to $.trim it to see if it's whitespace only.

Engineer Over a year ago

@ElliotBonneville Yeah, I know it. But 'empty' means 'no content', no tags, no text.

|

Selvakumar Arumugam · Accepted Answer · 2012-05-18 20:24:46Z

1

Just posting my version,

$('.msgalert').filter(function () {
   return ($(this).text().length == 0 && $(this).children().length == 0);
}).css('display', 'none');

answered May 18, 2012 at 20:24

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

3 Comments

Selvakumar Arumugam Over a year ago

included .children check for empty tags :)

Selvakumar Arumugam Over a year ago

@casey7398 Your fiddle was buggy.. try here jsfiddle.net/skram/jSYC3/4 --> btw.. you were trying out Elliot suggestion.

casey7398 Over a year ago

Does it not working have anything to do with <div class=msgalert> being inside of another div id....?

Collectives™ on Stack Overflow

Javascript hide div (is:empty) issue

2 Answers 2

15 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related