How to hide parent div if first child is empty

Issue

I want to hide class "aa" if the first div element is empty in class "ca". Please guide me

My sample code:

<div class="aa">
<div class="ca">
   <div></div>
   <div class="cb"></div>
   <div class="cc"></div>
</div>
<div>

Appreciate your response!

Solution

You can use children(":first") to get first child of div as

$(document).ready(function(){
if($('.ca').children(":first").text() == ""){
  $('.aa').hide();
}
});

$(document).ready(function(){
if($('.ca').children(":first").text() == ""){
  $('.aa').hide();
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aa">
<div class="ca">
   <div></div>
   <div class="cb">A</div>
   <div class="cc">B</div>
</div>
<div>

Answered By - Hien Nguyen