How to remove a div element when the child elements are hidden

Question

I've got a list of staff organised into each department they work in. At the top of this page, I have a search box to search for names and a select box to choose the department. This works fine. When searching for say "Person4" it will hide all of the other people but keep the other department headings. Is there anyway that when filtering for "Person4" , "Department1" is hidden?

$('select').change(function() {
  var e2 = $("#dpt").val().toLowerCase();
  var e = new RegExp(e2);
  $(departmentfilter).each(function() {
    if (e.test(this.innerHTML.toLowerCase())) 
      $(this).show();
    else 
      $(this).hide();
  });
});


$('#searchbox').bind('keyup', function() {
  var s2 = this.value.toLowerCase();
  var s = new RegExp(s2);
  $(personfilter).each(function() {
    if (s.test(this.innerHTML.toLowerCase())) 
      $(this).show();
    else 
      $(this).hide();
  });
});

<input type="text" id="searchbox" placeholder="Search Staff">
<select id="dpt">
<option  value="" selected>All Staff</option>
<option value="Department1">Department1</option>
<option value="Department2">Department2</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="departmentfilter"> Department1
  <div id="personfilter">Person1</div>
  <div id="personfilter">Person2</div>
  <div id="personfilter">Person3</div>
</div>
<div id="departmentfilter"> Department2
  <div id="personfilter">Person4</div>
  <div id="personfilter">Person5</div>
  <div id="personfilter">Person6</div>
</div>

Answer 1

First of all you need to use classes instead of duplicate id 's since the identifier should be unique in the same document :

<div class="departmentfilter"> Department1
  <div class="personfilter">Person1</div>
  <div class="personfilter">Person2</div>
  <div class="personfilter">Person3</div>
</div>
<div class="departmentfilter"> Department2
  <div class="personfilter">Person4</div>
  <div class="personfilter">Person5</div>
  <div class="personfilter">Person6</div>
</div>

Then you could hide all departements and show just the related one with the filtred result like :

$('.departmentfilter').hide(); //Hide all departments
$(this).closest('.departmentfilter').show(); //Show the related one

 $('select').change(function() { var e2 = $("#dpt").val().toLowerCase(); var e = new RegExp(e2); $('.departmentfilter').each(function() { if (e.test(this.innerHTML.toLowerCase())) $(this).show(); else $(this).hide(); }); }); $('#searchbox').bind('keyup', function() { var s2 = this.value.toLowerCase(); var s = new RegExp(s2); $('.departmentfilter').hide(); //Hide all departments $('.personfilter').each(function() { if (s.test($(this).text().toLowerCase())) { $(this).show(); $(this).closest('.departmentfilter').show(); //Show the related one } else $(this).hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="searchbox" /> <select id="dpt"> <option value="" selected>All Staff</option> <option value="Department1">Department1</option> <option value="Department2">Department2</option> </select> <br> <div class="departmentfilter"> Department1 <div class="personfilter">Person1</div> <div class="personfilter">Person2</div> <div class="personfilter">Person3</div> </div> <div class="departmentfilter"> Department2 <div class="personfilter">Person4</div> <div class="personfilter">Person5</div> <div class="personfilter">Person6</div> </div>