Hide parent element if no elements exist in child element
See the following markup:
<div class="careersIntegration__listing" id="careers-listing">
<div class="careersIntegration__accordion">
<div class="careersIntegration__accordion-header">
<span class="careersIntegration__accordion-dept">Sales</span>
</div>
<div class="careersIntegration__accordion-jobs" data-dept="sales"></div>
</div>
<div class="careersIntegration__accordion">
<div class="careersIntegration__accordion-header">
<span class="careersIntegration__accordion-dept">Customer Success</span>
</div>
<div class="careersIntegration__accordion-jobs" data-dept="customer-success">
<figure class="careerCard" data-dept="customer-success">Job</figure>
</div>
</div>
</div>I'm trying to hide .careersIntegration__accordion's which have .careersIntegration__accordion-jobs elements that have no children.
To simplify, if .careersIntegration__accordion-jobs has no children, hide the parent .careersIntegration__accordion element.
I've seen examples on existing SO posts (see this one), but cannot get the approach to work in my instance. See posts below which I have tried:
- jquery if div id has children
- jQuery hide parent div if child div is empty
- css hide div if div has no child with class
With my current approach below, the else statement is executed, unsure why?
$(".careersIntegration__accordion").each(function(){
if( $(this).children(".careersIntegration__accordion-jobs").length == 0 ){
$(this).parent().hide();
} else{
console.log('has children');
}
});Contrary to your assumption
$(this).children(".careersIntegration__accordion-jobs")
doesn't return the children of elements using the CSS class careersIntegration__accordion-jobs. In fact it only returns the actual elements using this CSS class. If you want to have it's children you need to append another call to .children().
For example:
$(".careersIntegration__accordion").each(function() {
if ($(this).children(".careersIntegration__accordion-jobs").children().length == 0) {
$(this).hide();
} else {
console.log('has children');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="careersIntegration__listing">
<!-- this should be hidden -->
<div class="careersIntegration__accordion">
<div class="careersIntegration__accordion-header">
<span class="careersIntegration__accordion-dept">Sales</span>
</div>
<div class="careersIntegration__accordion-jobs"></div>
</div>
<!-- this should not be hidden -->
<div class="careersIntegration__accordion">
<div class="careersIntegration__accordion-header">
<span class="careersIntegration__accordion-dept">Tech</span>
</div>
<div class="careersIntegration__accordion-jobs">
<div>item</div>
</div>
</div>
</div>