How to show a message when there's no more items in a list with jquery

In my application, the user click a delete button to delete items from a list. And when the last item is deleted it should show a message saying that there's no more item. My code deletes the items fine but after the last one, it doesn't show the message. Why is that?

Jquery:

var optionLinkBox = $('.option-lnk');

optionLin开发者_StackOverflow社区kBox.delegate('.um-delete-lnk', 'click', function(e){
    var thisElem = $(this);

    thisElem.closest('li').fadeTo(400, 0, function(){
        $(this).slideUp(400, function(){
            $(this).remove();
        });

        if($('.um-card-detail li').length < 1){
            // Message to show after the last item
            $('section:first').text('You don\'t have any payment card saved.');
        }
    });

    e.preventDefault();
});

HTML:

<section>
  <ul class="um-card-detail">        
    <li class="um-card-li">
      <h3>Your card <small>(This is your default card)</small></h3>
      <div class="option-lnk">
        <a href="#">Edit</a> | <a href="#" class="um-delete-lnk">Delete</a>
      </div>

      <h3>Some payment details</h3>
    </li>

    <li class="um-card-li">
      <h3>Your card</h3>
      <div class="option-lnk">
        <a href="#">Edit</a> | <a href="#" class="um-delete-lnk">Delete</a>
      </div>

      <h3>Some payment details</h3>
    </li>
  </ul>
</section>

I think the check is being performed even before the last li element is deleted (since the element is removed in the call back of fadeIn).

Move the code that checks for the last li into the callback of fadeIn method, it will work.

Try this:

var optionLinkBox = $('.option-lnk');

optionLinkBox.delegate('.um-delete-lnk', 'click', function(e){
var thisElem = $(this);

thisElem.closest('li').fadeTo(400, 0, function(){
    $(this).slideUp(400, function(){
        $(this).remove();
        if($('.um-card-detail li').length < 1){
            // Message to show after the last item
            $('section:first').text('You don\'t have any payment card saved.');
        }
    });
});

e.preventDefault();
});

That is because the following:

    if($('.um-card-detail li').length < 1){
        // Message to show after the last item
        $('section:first').text('You don\'t have any payment card saved.');
    }

is executed before the last item is deleted:

$(this).slideUp(400, function(){
    $(this).remove();
});

The function callback supplied to the slideUp method would execute after the slide operation has finished and after the current function have returned which is after 400 milliseconds, you should put the if statement inside the callback.

    $(this).slideUp(400, function(){
        $(this).remove();
        if($('.um-card-detail li').length < 1){
            // Message to show after the last item
            $('section:first').text('You don\'t have any payment card saved.');
        }
    });

The reason is that you have $(this).remove(); wrapped inside of a slideUp() function, which takes 400 milliseconds to execute. Your IF statement doesn't wait for the slideUp to finish executing. To accomplish that, put the statement in the slideUp callback like this:

$(this).slideUp(400, function(){
    $(this).remove();
}, function() {
    if($('.um-card-detail li').length < 1){
        // Message to show after the last item
        $('section:first').text('You don\'t have any payment card saved.');
    }
});