Question

In my web application I have around 10 headings with same class name, so when a user click on that a loading image will be appended to them and some data will be filled via ajax in a div then after this whole processing i just want to remove that loading image.

Here is my code:

jQuery('.replyhead').live('click',function(){
    var idval=jQuery(this).attr('id');
    jQuery(this).append('<img src="images/loading.gif"/>');

    jQuery.post('abc.php',{rack:idval},function(data) {
        jQuery('#r'+idval).html(data);      
        //now here i just need to remove that loading.gif       
    });
});

Any recommendations on how to do this?

Answer 1

Instead of using append() create an element using the jQuery constructor, use appendTo to append it. Later, you can use img.remove() (or whatever variable name you’ve chosen) to rmeove the image.

jQuery('.replyhead').live('click',function(){

    var idval = jQuery(this).attr('id');
    var img = jQuery('<img src="images/loading.gif"/>').appendTo(this);
    jQuery.post('abc.php',{rack:idval},function(data){
        jQuery('#r'+idval).html(data);      

        //Remove img
        img.remove();
    });
});

An alternative method would consist of attaching an unique ID to the image, and use $("#uniqueIDhere").remove() to remove the element. This method will break when you’re not properly defining unique IDs though.

(Taken from the answer below, showing relevant parts only):

jQuery(this).append('<img id="loadinggif" src="images/loading.gif"/>');
    jQuery('#loadinggif').remove(); //This will FAIL if the function is executed twice