Question

Hi have the following function which works fine:

        jQuery('.btnRemoveItem').click(function(obj){                
           jQuery(this).closest('li').fadeOut(400, function() { $(this).remove(); }); // This works
        });   

On this HTML code:

<li id="listItem_dsc_6440.jpg"> 
    <div class="buttonPanel">
        <span title="Delete image" class="btnRemoveItem floatRight" id="dsc_6440.jpg"> </span>
    </div>
</li>

This fades down the list item, then removes it.
Now I’m adding a jQuery.post and I need to put the fadeout / remove inside this .post

        jQuery('.btnRemoveItem').click(function(obj){

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

Of course, this doesn’t work. I’m pretty sure it’s because I don’t know what obj is – and how I can use it.

Can anyone help me please?

Answer 1

Save this in a local variable. Like this:

    jQuery('.btnRemoveItem').click(function(){
        var obj = this; //reference to the button
        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() { $(obj).remove(); });
            }
        }, "json");
     }); 

The callback function of post forms a closure and it can ‘see’ the local variables of the outer function.