如果没有子元素，则父元素应隐藏

Question

I have a list item. Each list contain class .filter-tag. when I click on each .filter-tag it goes hidden. Here is the Example: FIDDLE

But I am wanting when all the list item is hidden, parent(.filter-tag-has-content) of this list item should also hide. Means if no list element is visible parent will hide also but if one if visible parent should stay visible too.

HTML

<div class="filter-tag-container">
    <ul class="filter-tag-has-content">
        <li class="filter-tag" id="fl-1">
            <span class="tag-name">Filter Option 1</span>
            <span class="fa fa-times"></span>
         </li>
        <li class="filter-tag" id="fl-2">
            <span class="tag-name">Filter Option 2</span>
            <span class="fa fa-times"></span>
        </li>
        <li class="filter-tag" id="fl-3">
            <span class="tag-name">Filter Option 3</span>
            <span class="fa fa-times"></span>
        </li>
        <li class="filter-tag" id="fl-4">
            <span class="tag-name">Filter Option 4</span>
            <span class="fa fa-times"></span>
        </li>
        <li class="filter-tag" id="fl-5">
            <span class="tag-name">Filter Option 5</span>
            <span class="fa fa-times"></span>
        </li>

    </ul>
</div>

JS

$('.filter-tag').click(function(){
    $(this).hide();
}); 

Answer 1

Check the length of the visible list items as you click them. Once there are none left, hide the list.

$('.filter-tag').click(function(){
    $(this).hide();
    if(!$('.filter-tag:visible').length) $('ul.filter-tag-has-content').hide()
}); 

jsFiddle example

Or to use on multiple containers:

$('.filter-tag').click(function(){
    $(this).hide();
    if(!$(this).siblings(':visible').length)$(this).parent().hide()
}); 

jsFiddle example

Answer 2

try this code.

$('.filter-tag').click(function(){
    $(this).hide();
    if( ! $(this).parent().children(':visible').length > 0){
        $(this).parent().hide();
    }
});