javascript - 如果没有子元素，父元素应该隐藏

Question

我有一个列表项。每个列表都包含类 .filter-tag。当我点击每个 .filter-tag 时，它会隐藏起来。这是示例: FIDDLE

但我想当所有列表项都被隐藏时，该列表项的 parent(.filter-tag-has-content) 也应该隐藏。意味着如果没有列表元素可见，父级也会隐藏，但如果可见，父级也应保持可见。

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

单击可见列表项时检查它们的长度。一旦没有剩余，隐藏列表。

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

jsFiddle example

或者在多个容器上使用:

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

jsFiddle example