隱藏子元素時如何刪除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>