CODEWITHSUNDEEP
javascriptjquery
casey7398
casey7398

Reputation: 11

Javascript hide div (is:empty) issue

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 :)

Upvotes: 1

Views: 111

Answers (2)

Elliot Bonneville
Elliot Bonneville

Reputation: 53301

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.

Upvotes: 3

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Just posting my version,

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

Upvotes: 1

Related Questions