How to hide parent div if first child is empty-CodePudding

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!

CodePudding user response：

You can check to see if the first childNode of the .ca parent element has content, and then target .aa from there if it does not:

//If there is no content within the first div of the class="ca" div...
//choose between textContent and innerHTML below 
//based on whether it is going to have any text or some HTML within (with possibly no text)
if (!document.querySelector('.ca').childNodes[0].innerHTML) {
    //hide the class="aa" div
    document.querySelector('.aa').style.display = 'none';
}

CodePudding user response：

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>