How can i hide an ul when it has no li inside?

Question

Let's supose i have this HTML:

<ul class="nested">
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

<ul class="nested">
</ul>

<ul class="nested">
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

I would like to check which ul has no li, when page get loaded, and hide it.

It can be done using jquery as well.

Thanks,

score 6 · Answer 1 · answered Nov 14 '18 at 15:36

6

You only need CSS

The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.

div:empty {
   display: none;
}

Source https://css-tricks.com/almanac/selectors/e/empty/

answered Nov 14 '18 at 15:36

Blagoj Atanasovski

793
4
15

5
Worth noting that the `
– George Nov 14 '18 at 15:40
1

Yes, unfortunately, if the `ul` tag has anything even a white-space it will not match the :empty selector – Blagoj Atanasovski Nov 14 '18 at 15:42

cmprogram · Accepted Answer · 2018-11-14T15:46:29.660

1

You can do this using the following jQuery.

 window.onload = function(){ // When the page has finished loading.
    $(".nested").each(function(){ // Check every "nested" class 
    if($(this).children().length == 0){ // If this nested class has no children
        $(this).hide(); // This will hide it, but not alter the layout
        // $(this).css("display", "none"); // This will alter the layout
        } else{
        $(this).show();
        //$(this).css("display", "none"); // This will alter the layout
        }
     }
}

Or, as user Rory McCrossan suggested, much more simply written :

window.onload = function(){
    $('.nested:not(:has(li))').hide(); // Will not alter layout
    // $('.nested:not(:has(li))').css("display", "none"); // Will alter layout
    }

edited Nov 14 '18 at 15:46

answered Nov 14 '18 at 15:41

cmprogram

1,854
2
13
25

2

Or just `$('.nested:not(:has(li))').hide()` – Rory McCrossan Nov 14 '18 at 15:42
@RoryMcCrossan That is an incredible solution. Remarkably impressed as always. So much simpler. So much better. – cmprogram Nov 14 '18 at 15:44

score 0 · Answer 3 · answered Nov 14 '18 at 15:40

To do that by jQuery you can use $.each in jQuery...also theres a lot of possible option can resolve this issue

$(".nested").each(function(index){
    if(!$(this).find("li").length){
        $(this).hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nested">
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

<ul class="nested">
</ul>

<ul class="nested">
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

How can i hide an ul when it has no li inside?

3 Answers3