Jquery 如何在子Div'；s显示为无

我有一个类为（.filterTags）的父Div，其中有两个类为（.tagParent）的子Div。在子div中有一个close按钮（x），单击close按钮（x）时，相应的子级变为display none。当两个子div变为display none时，父div也应该变为none。如何做到这一点

$（“.tagCloser”）。单击（函数（）{
$（this.parent（“.tagParent”）.hide（）；
});
.filterTags{
显示器：flex；
柔性包装：包装；
填充：20px 25px 10px；
背景：黄色；
}
tagParent先生{
填充：0px 0px 0px 15px；
背景：#e40046；
颜色：#fff；
字体系列：粗体；
边界半径：5px；
保证金：0px 10px 10px 0px；
显示器：flex；
}
.tagContent{
自对准：居中；
}
tagCloser先生{
填充：7px 10px；
光标：指针；
自对准：居中；
}

紧急的
x
受喜爱的
x
您只需添加：

if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();

这将检查类
tagParent
是否有任何可见元素，如果没有，则将隐藏

演示


$（“.tagCloser”）。单击（函数（）{
$（this.parent（“.tagParent”）.hide（）；
if（$（'.filterTags.tagParent:visible'）.length==0）$（'.filterTags'）.hide（）；
});
.filterTags{
显示器：flex；
柔性包装：包装；
填充：20px 25px 10px；
背景：黄色；
}
tagParent先生{
填充：0px 0px 0px 15px；
背景：#e40046；
颜色：#fff；
字体系列：粗体；
边界半径：5px；
保证金：0px 10px 10px 0px；
显示器：flex；
}
.tagContent{
自对准：居中；
}
tagCloser先生{
填充：7px 10px；
光标：指针；
自对准：居中；
}

紧急的
x
受喜爱的
x
您需要检查隐藏的child数是否等于总child数，如下面的代码片段所示


$（“.tagCloser”）。单击（函数（）{
$（this.parent（“.tagParent”）.hide（）；
let tags=$（this.parents（.filterTags”）.find（.tagParent”）；
let hidden=$（this）.parents（.filterTags”）.find（.tagParent:not（：visible）”；
if（tags.length==hidden.length）{
$（this.parents（“.filterTags”）.hide（）；
}
});
.filterTags{
显示器：flex；
柔性包装：包装；
填充：20px 25px 10px；
背景：黄色；
}
tagParent先生{
填充：0px 0px 0px 15px；
背景：#e40046；
颜色：#fff；
字体系列：粗体；
边界半径：5px；
保证金：0px 10px 10px 0px；
显示器：flex；
}
.tagContent{
自对准：居中；
}
tagCloser先生{
填充：7px 10px；
光标：指针；
自对准：居中；
}

紧急的
x
受喜爱的
x
实现这一目标有两种可能：

在所有子类都隐藏时处理父类
不给家长任何布局，布局由孩子驱动
在所有子类都隐藏时处理父类
您可以创建一个jquery方法来处理子对象的显示/隐藏行为，在所有子对象消失时向父对象添加一个类（例如“隐藏”）：

<div id="parent">
  <div class="children">
  CHILDREN A
  </div>
  <div class="children">
  CHILDREN B
  </div>
</div>
.hidden {
  display: none;
}

#parent {
  background: red;
  width: 10rem;
  height: 2rem;
  padding: 10px;
  display: flex;
}

#parent.hidden {
  display: none;
}

.children {
  background: blue;
  height: 100%;
}

$('.children').on('click', function(_){
    // store objects in constants for performances
    const $this = $(this);
  const $parent = $this.parent();
  // get the length of parent childrens with hidden class
  // you can also check using :visible selector
  // const {length} = $parent.find(':visible');
  const {length} = $parent.find('.hidden');
  // hide the child
    $this.addClass('hidden');
  // logical example
  // if children count with class hidden is equals to the children count
  // (-1 because we need to consider the current children)
  // then hide the parent
  if(length === $parent.children.length - 1) {
    $parent.addClass('hidden');
  }
})


儿童A
儿童B
.隐藏{
显示：无；
}
#母公司{
背景：红色；
宽度：10雷姆；
高度：2em；
填充：10px；
显示器：flex；
}
#父项隐藏{
显示：无；
}
.儿童{
背景：蓝色；
身高：100%；
}
$（'.children'）。在（'click'，函数（41;）上{
//将对象存储在常量中以获得性能
const$this=$（this）；
const$parent=$this.parent（）；
//获取具有隐藏类的父级子级的长度
//也可以使用：可见选择器进行检查
//常量{length}=$parent.find（':visible'）；
常量{length}=$parent.find（'.hidden'）；
//把孩子藏起来
$this.addClass（'hidden'）；
//逻辑示例
//如果隐藏类的子项计数等于子项计数
//（- 1，因为我们需要考虑当前的孩子）
//然后隐藏父对象
如果（长度==$parent.children.length-1）{
$parent.addClass（'hidden'）；
}
})


这个解决方案很酷，但在我看来并不是最好的，因为您可以仅使用css来实现相同的结果（这种情况受到您需要做的工作和想要实现的结果的限制）

不给家长任何布局，布局由孩子驱动
这是最好的解决方案，其背后的逻辑是，父对象只是一个包装器，它没有布局，并且适合子对象，因此当没有子对象可见时，父对象将自动消失：

<div class="parent">
  <div class="children">
  CHILDREN A
  </div>
  <div class="children">
  CHILDREN B
  </div>
</div>

    .hidden {
      display: none;
    }

    .parent {
      background: red;
      display: flex;
    }

    .children {
      background: blue;
      height: 2rem;
      width: 50%;
      margin: 1rem;
      display: inline-flex;
    }

    .children.hidden {
      display: none;
    }

$('.children').on('click', function(_) {
  $(this).addClass('hidden');
  settimeout(() => {
    $(this).removeClass('hidden');
  }, 5000)
})


儿童A
儿童B
.隐藏{
显示：无；
}
.家长{
背景：红色；
显示器：flex；
}
.儿童{
背景：蓝色；
高度：2em；
宽度：50%；
保证金：1rem；
显示：内联flex；
}
.孩子们{
显示：无；
}
$（'.children'）。在（'click'，函数（41;）上{
$（this.addClass（'hidden'）；
设置超时（（）=>{
$（this.removeClass（'hidden'）；
}, 5000)
})

$（this）.parent（）