隐藏子元素时如何删除div元素

Question

我有一个组织到他们工作的每个部门的工作人员列表。在此页面的顶部，我有一个搜索框以搜索姓名，并有一个选择框以选择部门。 这很好。 当搜索说"Person4" ，它将隐藏所有其他人，但保留其他部门的标题。 无论如何，在过滤"Person4" ， "Department1"被隐藏了吗？

$('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

首先，您需要使用类而不是重复的id ，因为标识符在同一文档中应该是唯一的：

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

然后，您可以隐藏所有部门，并仅显示相关的部门，其过滤结果如下：

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