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!

alert on the last li within the section or under the specific date? — melc
– melc, Commented Dec 4, 2013 at 8:21
alert when the last <li> within the <section> is removed (ignore the specific date <li>) — Alex
– Alex, Commented Dec 4, 2013 at 8:22

Alex · Accepted Answer · 2013-12-04 09:10:02Z

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

edited Dec 4, 2013 at 9:10

Alex

1,6163 gold badges18 silver badges35 bronze badges

answered Dec 4, 2013 at 8:26

melc

11.7k3 gold badges39 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

melc Over a year ago

@Alex if you want to use class names instead of removing, you can modify the condition of .notification li elements and modify the removal part jsfiddle.net/Gd2kS/2 . Also updating the answer with the relevant code.

melc Over a year ago

@Alex great, i'll post the code from the fiddle in the answer, to assist other visitors as well, if you want to modify it with your own version please do so, thanks.

Collectives™ on Stack Overflow

Iterate through list and show message when empty jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related