How do I "update code" after removing <li> element using jQuery?

Question

I have 16 <li> items.
Upon clicking a button, I run the following code which removes a <li> item.

jQuery('.btnRemoveItem').live("click",function(){
    var obj = this;
    jQuery.post("wp-content/themes/storelocator/include/adm_gallery.php", { deleteImage: 'single', name: jQuery(this).attr('id') },
    function(data){
        if(data.status == 'deleted');
        {
            jQuery(obj).closest('li').fadeOut(400, function() { $(this).remove(); });
            var count = jQuery('#adminGallery ul li').length;
            jQuery('#imageCount').html(count);
        }
    }, "json");

});

This code works and removes the list item. However, doing a item count, still returns 16 items. I therefore need to bind the event somehow. I thought maybe that $.live would help, but it has no effect.

How should I go around to "bind" the <li> removal?

Answer 1

It is not working because you are not removing the element until it finishes fading out which takes 400ms, meanwhile the rest of the code moves on and the count still sees the soon-to-be-deleted <li>.

Simply move the two lines below the fadeout to be inside the callback function and it will work as you intend.

Answer 2

Maybe a simpler approach would work:

jQuery('#imageCount').html(count - 1);

What you have doesn't work because the element isn't actually removed until it has finished fading out.