Iterate through list and show message when empty jQuery

Question

I want to display a message when the <section> is “empty”. Inside the <section>, I can have an unknown number of <ul> and inside it an unknown number of <li>. When I click on “x” button it removes that <li>. Here’s the HTML:

<section>
  <ul>
    <li class="row  row--half-padding-top-bottom">
      <span>October 2013</span>
    </li>

    <li class="notification  notification--new">
      <span>
        <span>Franck Ribery</span>
        <span>Bayern Munich</span>
      </span>
      <span class="accept-ignore-container">
        <button class="js-animate-onclick--parent" title="Accept">Accept</button>
        <button class="js-connect-invite--ignore">&times;</button>
      </span>
    </li>
    <li class="notification  notification--new">
      <span>
        <span>Arjen Robben</span>
        <span>Bayern Munich</span>
      </span>
      <span class="accept-ignore-container">
        <button class="js-animate-onclick--parent" title="Accept">Accept</button>
        <button class="js-connect-invite--ignore">&times;</button>
      </span>
    </li>
  </ul>

  <ul>
    <li class="row  row--half-padding-top-bottom">
      <span>September 2013</span>
    </li>

    <li class="notification  notification--new">
      <span>
        <span>Franck Ribery</span>
        <span>Bayern Munich</span>
      </span>
      <span class="accept-ignore-container">
        <button class="js-animate-onclick--parent" title="Accept">Accept</button>
        <button class="js-connect-invite--ignore">&times;</button>
      </span>
    </li>
  </ul>
</section>

I want to ignore the <li> element that shows the date (hence the “empty”, because it’s not really empty). To do that, I check if the <li> has a class .notification. If it has, increase the counter. I do that upon clicking the “x” button that has a class .js-connect-invite--ignore:

var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
  var ul = $(this).closest('section').children();

  $(ul).each(function() {
    var li = $(this).children();
    counter = 0;

    $(li).each(function() {
      if ($(this).is('.notification')) {
        console.log('yes');
        counter ++;
      }
    })
  })
  console.log(counter);
})

See demo: http://jsfiddle.net/CCECK/

However, it’s not working properly as the logic is wrong. Do I need to add two counters?

How can upon clicking “x” check all the other elements and if that is the last <li class="notification"> display an alert? Thanks!

Answer 1

Basically you reset the counter within each ul, so you always end up with the number of li elements of the last ul, which is 1. So if you reset the counter before iterating all the ul elements and also remove the .notification element on clicking the button then you can figure out when only one has been left. You can try the following,

http://jsfiddle.net/Gd2kS/

js

var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
  var ul = $(this).closest('section').children();

  counter = 0;

  $(ul).each(function() {
    var li = $(this).children();

    $(li).each(function() {
      if ($(this).is('.notification')) {
        console.log('yes');
        counter ++;
      }
    });
  });
    console.log(counter);
    if(counter==1){
        alert("last one left!!");
    }else{
        $(this).parents('.notification').remove();
    }
})

EDIT - response to comments (hiding element with class .visuallyhidden instead of removing element)

var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
  var ul = $(this).closest('section').children();

  counter = 0;

  $(ul).each(function() {
    var li = $(this).children();

    $(li).each(function() {
      if ($(this).is('.notification')
          &&  !$(this).is('.visuallyhidden')) {/*<- modify the condition*/
         console.log($(this));
          console.log('yes');
          counter ++;

      }
    });
  });
    console.log(counter);
    if(counter==1){
        alert("last one left!!");
    }else{
        /*modify the removal*/
        //$(this).parents('.notification').remove();
        $(this).parents('.notification').addClass("visuallyhidden");
    }
})