jQuery callback function to check number of child elements on element click

Question

I have a set of "div" whose children count I want to check when a user fadeOut images under that div block, if the all childrens have be closed out i want to call the function: kind of like:

edited: the current code always alerts YES whenever the div is faded, how do i destroy the DOM entirely without having to use :visible filter. getting rid of the entire card class after fading out considering the HTML:

<div class='scrolling-wrapper'>
  <div class='card'>
    <div class='panel panel-primary'>
      <div class='panel-body'>
        <div class='img-wrap'>
          <span class='close-x'> &times; </span>
          <img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100' />
        </div>
        <div class='title h5'>
          <span class='user-popover'>
                        <a href='/groupstomason/'><b>tomason</b></a>
                        </span>
          <br/>
          <small class='small-text'>for max tomason
                        </small>
        </div>
      </div>
      <div class='panel-heading'>
        <button class='btn btn-primary'> <span class='fa fa-plus-circle fa-fw'> </span>Join </button>    
      </div>
    </div>
    <div class='card-group-holder' style='width:250px; background-color:inherit;'>    
    </div>
   <div class="card"> another card</div>
    <div class="card"> another card</div>
   <div class="card"> another card</div>
  </div>

and the jquery below:

$('.img-wrap .close-x').on('click', function() {
  var card = $(this).closest('.card');
  card.fadeOut('slow', function() {
    var cardWrapper = $(this).closest('.card').closest('scrolling-wrapper');
    var cardcount = cardWrapper.children('.card');
    if (cardcount.length < 1) alert('yes');
  });
});

when the <span class = 'close-x'> &times; </span> <span class = 'close-x'> &times; </span> is clicked the entire <div class='card'> is fadedOut, then on fadeout, if no more cards exist or the last cards have been faded, then alert('yes');

Answer 1

Assuming that multiple .card elements are nested in the same parent, you can check if all the siblings have faded out.

In your original markup, you have an unclosed </div> , which causes the .card elements not to be siblings of each other, I believe this is a typo on your part, since it is the most parsimonious explanation.

Since .fadeOut() hides the element, you can simply check if the filtered set of :visible returns a length of 1 or more:

$('.img-wrap .close-x').on('click', function() {
  var card = $(this).closest('.card');
  card.fadeOut('slow', function() {
    var cardWrapper = $(this).closest('.scrolling-wrapper');
    var cardcount = cardWrapper.children('.card');
    if (cardcount.filter(':visible').length < 1) {
        console.log('All cards have faded out');
    }
  });
});

Here is a proof-of-concept example:

 $(function() { $('.close').on('click', function() { var card = $(this).closest('.card'); card.fadeOut('slow', function() { // Get wrapping ancestor var cardWrapper = $(this).closest('.scrolling-wrapper'); var cardcount = cardWrapper.children('.card'); // Filter out those that are not visible, and check for remaining visible cards if (cardcount.filter(':visible').length < 1) { console.log('All cards have faded out'); } }); }); }); 

 /* Just styles for a dummy call-to-action element in .card */ span.close { cursor: pointer; color: steelblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scrolling-wrapper"> <div class="card">Card 1. <span class="close">Click to hide me.</span></div> <div class="card">Card 2. <span class="close">Click to hide me.</span></div> <div class="card">Card 3. <span class="close">Click to hide me.</span></div> <div class="card">Card 4. <span class="close">Click to hide me.</span></div> <div class="card">Card 5. <span class="close">Click to hide me.</span></div> </div> 

Answer 2

In your callback you may simply test if at least a card is visible:

if ($(this).closest('.card').siblings('.card:visible').length < 1) alert('yes');

 $('.img-wrap .close-x').on('click', function () { var card = $(this).closest('.card'); card.fadeOut('slow', function () { if ($(this).closest('.card').siblings('.card:visible').length < 1) console.log('yes'); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class='scrolling-wrapper'> <div class='card'> <div class='panel panel-primary'> <div class='panel-body'> <div class='img-wrap'> <span class='close-x'> &times; </span> <img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/> </div> <div class='title h5'> <span class='user-popover'> <a href='/groupstomason/'><b>tomason</b></a> </span> <br/> <small class='small-text'>for max tomason </small> </div> </div> <div class='panel-heading'> <button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button> </div> </div> <div class='card-group-holder' style='width:250px; background-color:inherit;'> </div> </div> <div class='card'> <div class='panel panel-primary'> <div class='panel-body'> <div class='img-wrap'> <span class='close-x'> &times; </span> <img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/> </div> <div class='title h5'> <span class='user-popover'> <a href='/groupstomason/'><b>tomason</b></a> </span> <br/> <small class='small-text'>for max tomason </small> </div> </div> <div class='panel-heading'> <button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button> </div> </div> <div class='card-group-holder' style='width:250px; background-color:inherit;'> </div> </div> </div>