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

Answer 2

试试这段代码。

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

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

2 个答案: