Hide parent element if no elements exist in child element-CodePudding

See the following markup:

<div  id="careers-listing">
  
  <div >
    <div >
      <span >Sales</span>
    </div>
    <div  data-dept="sales"></div>
  </div>
  
  <div >
    <div >
      <span >Customer Success</span>
    </div>
    <div  data-dept="customer-success">
      <figure  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:

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');
  }
});

CodePudding user response：

You could use html() to get the information you need and then check if it's equal to an empty string:

$(this).children(".careersIntegration__accordion-jobs").html() === ''

That should do the trick!

CodePudding user response：

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 >

  <!-- this should be hidden -->
  <div >
    <div >
      <span >Sales</span>
    </div>
    <div ></div>
  </div>


  <!-- this should not be hidden -->
  <div >
    <div >
      <span >Tech</span>
    </div>
    <div >
      <div>item</div>
    </div>
  </div>


</div>

CodePudding user response：

Because $(this).children(".careersIntegration__accordion-jobs").length just counts the elements with the class careersIntegration__accordion-jobs - but you want to inspect the children of these elements.

The following code works:

$(document).ready(function(){
  $(".careersIntegration__accordion .careersIntegration__accordion-jobs").each(function(){
  console.log("children().length=" $(this).children().length);
    if( $(this).children().length == 0 ){
      $(this).hide();
      console.log('no children');
    } else{
      console.log('has children');
    }
  });
});

Check it out here: https://jsfiddle.net/czs0uya5/