CODEWITHSUNDEEP
jquery
Peeyush
Peeyush

Reputation: 4828

How to remove an appended() image using jquery?

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?

Upvotes: 1

Views: 2941

Answers (2)

rossipedia
rossipedia

Reputation: 59377

Just give it an ID, and then remove it later:

jQuery('.replyhead').live('click',function(){
    var idval=jQuery(this).attr('id');
    jQuery(this).append('<img id="loadinggif" 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       
        jQuery('#loadinggif').remove();
    });
});

Upvotes: 1

Rob W
Rob W

Reputation: 348992

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

Upvotes: 2

Related Questions