How to Hide Parent Div when the Child Div's display is none

Question

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?

$(".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

You have 2 possibilities to achieve this:

1. Handle the parent class, when all the childs are hidden
2. Give parent no layout, the layout is driven by the childrens

Handle the parent class, when all the childs are hidden You can create a jquery method wich handles the childrens show/hide behaviour, adding a class to parent (e.g. 'hidden') when all the childrens disappears:

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

https://jsfiddle.net/NicolaLC/Ldnz0p9y/

This solution is cool but not the best one in my opinon, because you can achieve the same result using only css (this case is limited by the work you need to do and the result you want to achieve)

Give parent no layout, the layout is driven by the childrens This is the best solution, the logic behind this is than the parent is only a wrapper, it has no layout and it adapt to childrens, so when no children is visible the parent disappears automatically:

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

https://jsfiddle.net/NicolaLC/kprdht1a/12/

Answer 2

You need to check if the number of hidden childs is equal to total childs or not, like in th efollowing snippet

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

.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 3

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

$(".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>