I have a Parent Div with class (".filterTags"), there is two child Div with class(".tagParent") inside it. There is a close button (x) inside the child div, on clicking the close button (x) the corresponding child becomes display none. when the two of the child div becomes display none, then the parent div should also need to become none. How to Achieve this?

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

```css
.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;
}
```

```html
<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>
```
['https://Stackoverflow.com/questions/56167977', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/9536402/']
You can just add:

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

```

This will check if there are any visible elements with the class `tagParent` and if there is none, then it will hide `<div class="filterTags">`

**Demo**

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

```css
.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;
}
```

```html
<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>
```
You need to check if the number of hidden childs is equal to total childs or not, like in th efollowing snippet

```js
$(".tagCloser").click(function() {
  $(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();
  }
});
```

```css
.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;
}
```

```html
<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>
```