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

Parent element Should Hide if there is no Child element

本文关键字：元素 隐藏 如果没有      更新时间：2023-09-26

我有一个列表项。每个列表包含.filter-tag类。当我点击每个。filter-tag时，它就隐藏了。下面是示例:FIDDLE

但是我想当所有的列表项是隐藏的，父(.filter-tag-has-content)这个列表项也应该隐藏。也就是说，如果列表中没有可见元素，父元素也会被隐藏，但如果有可见元素，父元素也会保持可见。

<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();
});

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

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

jsFiddle例子/strong>

或在多个容器上使用:

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

jsFiddle例子/strong>

试试这段代码。

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