Hide Parent if 2 specific children are empty

  1. I’m working on a project and I’d like to hide Parent if the 2 children are empty (child 1 is empty and child 2 is empty).
  2. Could anyone can help? I hade the code use emphasized text

jQuery('.parent') // Je cheche le mot parent
    .hide() // Cache le 
    .find(' (div.child1, div.child2):not(:empty)') // si le dic est 
    .each(function() { 
    jQuery(this).parent().show(); 
    return false; 
  })
;
<div class="parent  ">
    <div class="col-10 "></div>                                            
    <div class="col-10 "></div></div>
    <div class=" ">:</div></div>
    <div class=" child1"></div>
    <div class=" child2"></div>                  
</div>
<div class="parent ">
    <div class=" "></div>                                             
    <div class=" "> :</div>
    <div class=" "> :</div>
    <div class=" child1"></div>
    <div class=" child2"></div>                      
</div>

Answer

You can use each loop then compare value of divs using text() see if its "" if yes hide that parent div .

Demo Code :

$(".parent").each(function() {
  //use || if anyonecan be empty
  if (($(this).find(".child1").text().trim() == "") && ($(this).find(".child2").text().trim() == "")) {
    $(this).hide()
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="col-10 "></div>
  <div class="col-10 "></div>
  <div class=" ">:1</div>
  <div class="child1"></div>
  <div class="child2"></div>
</div>
<div class="parent">
  <div class=" "></div>
  <div class=" "> :2</div>
  <div class=" "> :2</div>
  <div class="child1"></div>
  <div class="child2"></div>
</div>
<div class="parent">
  <div class=" "></div>
  <div class=" "> :</div>
  <div class=" "> :</div>
  <div class="child1">3</div>
  <div class="child2">3</div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *