Hide "div" that contains a specific "div" in one of its children (at any level)

We want to hide “Level1” div that contains inside any “Level3” div in this code:

<div class="level1">
   Level 1A
   <div class="level2">
      Level 2A
      <div class="level3">
         Level 3A
      </div>
   </div>
</div>
<div class="level1">
   Level1B
   <div class="level2">
      Level2B
   </div>
</div>

We can do it by JQuery, once the page is loaded, that way:

<script type="text/javascript">
   $(document).ready(function(){
      hideLevelOne();
   });
   function hideLevelOne(){
      $.each($(".Level1"), function(key, value){
         if($(value).find($(".Level3")).length)
         {
            $(value).hide();
         }
         else
         {
            $(value).show();
         }
      });
   }
</script>

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.