javascript - 如果类别下没有任何子类别，则应隐藏该类别

Question

我正在研究类别和子类别结构，但陷入困境，我希望当我们删除所有子类别时，它们各自的类别也应该被删除。意思是说类别将只显示该类别有一些子类别。

有什么建议吗？

提前致谢

$('#col-result-1').click(function(e) {
    $('#result-1').fadeOut("slow");
});
$('#col-result-2').click(function(e) {
    $('#result-2').fadeOut("slow");
});

$('#col-result-3').click(function(e) {
    $('#result-3').fadeOut("slow");
});

$('#col-result-4').click(function(e) {
    $('#result-4').fadeOut("slow");
});

$('#col-result-5').click(function(e) {
    $('#result-5').fadeOut("slow");
});

$('#col-result-6').click(function(e) {
    $('#result-6').fadeOut("slow");
});

$('#col-result-7').click(function(e) {
    $('#result-7').fadeOut("slow");
});

.result{
    background: #f3f3f3;
    padding: 0 15px;
    margin:10px 0;
}
.result h3 {
    float: left;
    color: #127498;
    font-size: 16px;

}
.result .close-result {
   float: right;
    cursor; pointer;
}
.clear{ clear:both}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
           <div>
		     <h2>Category Name</h2>
                 
		     <div class="result" id="result-1">
                 <h3>Sub Category Name</h3>
                 <p class="close-result" id="col-result-1">Close</p>
                 <div class="clear"></div>
		     </div>
                 
		     <div class="result" id="result-2">
                 <h3>Sub Category Name</h3>
                 <p class="close-result" id="col-result-2">Close</p>
                 <div class="clear"></div>
		     </div>
		     
		     <div class="result" id="result-3">
                 <h3>Sub Category Name</h3>
                 <p class="close-result" id="col-result-3">Close</p>
                 <div class="clear"></div>
		     </div>

		  </div>
		   
		   <div>
		         <h2>Category Name</h2>
               
		          <div class="result" id="result-4">
                     <h3>Sub Category Name</h3>
                     <p class="close-result" id="col-result-4">Close</p>
                     <div class="clear"></div>
                  </div>
		  

		  		  <div class="result" id="result-5">
                     <h3>Sub Category Name</h3>
                     <p class="close-result" id="col-result-5">Close</p>
                     <div class="clear"></div>
                  </div>

		   </div>
		   
		   <div>
		         <h2>Category Name</h2>
               <div class="result" id="result-6">
                   <h3>Sub Category Name</h3>
                   <p class="close-result" id="col-result-6">Close</p>
                   <div class="clear"></div>
               </div>
		   </div>

Answer 1

当单击删除按钮时，向上导航到整个父容器并查看它是否还有任何剩余的.result div。如果没有，则删除父容器。

$('.close-result').click(function() {
  $(this).closest('.result').fadeOut('slow');
  if ($(this).closest('div:has(h2)').find('.result:visible').length == 1) {
    $(this).closest('div:has(h2)').remove();
  }
});

$('.close-result').click(function() {
  $(this).closest('.result').fadeOut('slow');
  if ($(this).closest('div:has(h2)').find('.result:visible').length == 1) {
    $(this).closest('div:has(h2)').remove();
  }
});

.result {
  background: #f3f3f3;
  padding: 0 15px;
  margin: 10px 0;
}
.result h3 {
  float: left;
  color: #127498;
  font-size: 16px;
}
.result .close-result {
  float: right;
  cursor;
  pointer;
}
.clear {
  clear: both
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
  <h2>Category Name</h2>

  <div class="result" id="result-1">
    <h3>Sub Category Name</h3>
    <p class="close-result" id="col-result-1">Close</p>
    <div class="clear"></div>
  </div>

  <div class="result" id="result-2">
    <h3>Sub Category Name</h3>
    <p class="close-result" id="col-result-2">Close</p>
    <div class="clear"></div>
  </div>

  <div class="result" id="result-3">
    <h3>Sub Category Name</h3>
    <p class="close-result" id="col-result-3">Close</p>
    <div class="clear"></div>
  </div>

</div>

<div>
  <h2>Category Name</h2>

  <div class="result" id="result-4">
    <h3>Sub Category Name</h3>
    <p class="close-result" id="col-result-4">Close</p>
    <div class="clear"></div>
  </div>


  <div class="result" id="result-5">
    <h3>Sub Category Name</h3>
    <p class="close-result" id="col-result-5">Close</p>
    <div class="clear"></div>
  </div>

</div>

<div>
  <h2>Category Name</h2>
  <div class="result" id="result-6">
    <h3>Sub Category Name</h3>
    <p class="close-result" id="col-result-6">Close</p>
    <div class="clear"></div>
  </div>
</div>

我重构了您的 JavaScript 点击处理以使用类而不是 ID，因为这大大减少了代码。