Javascript隐藏div（is：empty）问题

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

Answer 1

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.

Answer 2

Just posting my version,

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