CODEWITHSUNDEEP
javascriptjqueryhtmlcss
fightstarr20
fightstarr20

Reputation: 12588

Hide parent div if list is empty

I have the following....

<div class="validationbox">
    <h1>Errors</h1>
        <ul class="validationerrors">
            <li>Error 1</li>
            <li>Error 2</li>
            <li>Error 3</li>
        </ul>
</div>

The error list items are generated dynamically so sometimes there are none, I would like to hide the 'validationbox' div if there are no list items.

I imagine it is javascript or jquery that I should be looking at, does anyone have any examples?

Upvotes: 1

Views: 1454

Answers (3)

Ravi Kavaiya
Ravi Kavaiya

Reputation: 849

you can use not .

$('div .validationbox').not(':has(li)').hide();

hope it's help to you

Upvotes: 1

Johan
Johan

Reputation: 35194

$('.validationbox').toggle( $('.validationerrors li').length );

toggle() accepts a boolean value as an argument. $('.validationerrors li').length will evaluate to false if there is no <li> elements, else true, which will show the error list.

Upvotes: 2

VisioN
VisioN

Reputation: 145388

In jQuery you can do it as simple as:

$(".validationbox:not(:has(li))").hide();

In pure JavaScript you need to iterate ".validationbox" elements and search for <li> nodes inside:

var div = document.getElementsByClassName("validationbox");
for (var i = 0, len = div.length; i < len; i++) {
    if (!div[i].getElementsByTagName("li").length) {
        div[i].style.display = "none";
    }
}

Upvotes: 6

Related Questions