jquery - 子div不显示时如何隐藏父div

Question

我有一个带有类 (".filterTags") 的父 Div，其中有两个带有类 (".tagParent") 的子 Div。子div里面有一个关闭按钮(x)，点击关闭按钮(x)对应的子div变为display none。当子div的两个变成display none时，那么parent div也需要变成none。如何实现？

$(".tagCloser").click(function() {
  $(this).parent(".tagParent").hide();
});

.filterTags {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 25px 10px;
  background: yellow;
}

.tagParent {
  padding: 0px 0px 0px 15px;
  background: #e40046;
  color: #fff;
  font-family: Bold;
  border-radius: 5px;
  margin: 0px 10px 10px 0px;
  display: flex;
}

.tagContent {
  align-self: center;
}

.tagCloser {
  padding: 7px 10px;
  cursor: pointer;
  align-self: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="filterTags">
  <div class="tagParent">
    <span class="tagContent">Urgent</span>
    <span class="tagCloser">x</span>
  </div>

  <div class="tagParent">
    <span class="tagContent">Popular</span>
    <span class="tagCloser">x</span>
  </div>
</div>

Answer 1

你可以添加:

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

这将检查类 tagParent 是否有任何可见元素如果没有，那么它将隐藏 <div class="filterTags">

演示

$(".tagCloser").click(function() {
  $(this).parent(".tagParent").hide();
  if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();
});

.filterTags {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 25px 10px;
  background: yellow;
}

.tagParent {
  padding: 0px 0px 0px 15px;
  background: #e40046;
  color: #fff;
  font-family: Bold;
  border-radius: 5px;
  margin: 0px 10px 10px 0px;
  display: flex;
}

.tagContent {
  align-self: center;
}

.tagCloser {
  padding: 7px 10px;
  cursor: pointer;
  align-self: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="filterTags">
  <div class="tagParent">
    <span class="tagContent">Urgent</span>
    <span class="tagCloser">x</span>
  </div>

  <div class="tagParent">
    <span class="tagContent">Popular</span>
    <span class="tagCloser">x</span>
  </div>
</div>