Search code examples
javascriptjqueryhideparent

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>


Solution

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