Remove image dynamically using jquery

Question

I know using jquery, If I wanna load image runtime on click event, this syntax is used,

    $("#open_door").attr("src", "../assets/door_open.gif");

but If I wanna remove the same image runtime on another button's click event, then?? I want the syntax for the same

Have you tried setting the src attribute to an empty string? — Anthony Grist
– Anthony Grist, Commented Feb 21, 2013 at 16:41

Mithrandir · Accepted Answer · 2013-02-21 16:49:43Z

1

If you can't remove the image from the dom, hide it:

$("#open_door").css("display","none");

edited Feb 21, 2013 at 16:49

answered Feb 21, 2013 at 16:41

Mithrandir

25.5k6 gold badges53 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hazel Over a year ago

PLease read my comment above... and suggest other alternatives

Mike Brant · Accepted Answer · 2013-02-21 16:50:12Z

1

You could simply change the visibility css property of the elemenet to hidden. This will allow it to keep its position in the page layout, but not be seen.

$('#open_door').css('visibility', 'hidden');

answered Feb 21, 2013 at 16:50

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

7 Comments

Hazel Over a year ago

No, because, as it is an animated GIF, animation occurs once only when the image is loaded, after that just hiding and displaying will not replay the animation, for animation replay I need to remove and add the image dynamically, not hiding and displaying it...

Mike Brant Over a year ago

@Hazel I don;t believe that is the case. Check this fiddle: jsfiddle.net/cQhPU When you toggle the visibility off/on, the animation still works.

Hazel Over a year ago

You are right Mike, but in this image, the animation keeps on moving whereas in my case, just the door is opened using animation and remains opened, then nothing happens and image becomes static, so in my case it won't work... its just one cycle of animation, not the continuous one as in urs,... hope u got the difference

Mike Brant Over a year ago

@Hazel OK I understand now. Well your best bet then might be to hide the element and then when ready to display it again, quickly remove from the DOM and add a new visible element in its place (might even be able to make a clone of the original element).

Hazel Over a year ago

@Mike...I just have to add and remove the same element from the DOM, rather than making its visibility visible and hidden because the animation works only once and that too on load of the image...

|

11684 · Accepted Answer · 2013-02-21 17:06:49Z

0

You could do:

$("#open_door").attr("src", ""); // Set the src to "" (nothing)

Or:

$("#open_door").remove(); // remove #open_door from the DOM.

Found this somewhere else on SO, regarding your comment on your question:

$("#myimg").removeAttr("src").attr("src", "");

Or as a last resort you could upload a completely white image to your server, and display that instead:

$("#open_door").attr("src", "path/to/white/image.jpg");

edited Feb 21, 2013 at 17:06

answered Feb 21, 2013 at 16:42

11684

7,52812 gold badges52 silver badges74 bronze badges

9 Comments

Hazel Over a year ago

I am not supposed to remove from the element from the dom, so remove method is of no use, Basically I am using animated GIF as an image to be loaded runtime, but so giving blank src="" attribute keeps on repeating the animation, doesn't empty the image tag... So please suggest another alternative...

11684 Over a year ago

That's why I supplied two methods. @Hazel

11684 Over a year ago

I just saw your comment on your question and edited my answer accordingly. @Hazel

Hazel Over a year ago

It only removes the src attribute of the image, but not the image completely as I want :(

Hazel Over a year ago

I have stacked many images over one another and all with transparent background, hence uploading white pic will certainly not work... and the method removeAttr, removes the attribute and not the image and once the attribute is removed, it will create problem in again adding the image using .attr() on button click :<

|

armand5000 · Accepted Answer · 2014-02-07 21:51:43Z

I had a similar problem with Safari. It wouldn't let me set the attribute to a blank value. I wanted a button to trigger a short, gif animation to be played ONCE ... in this case, Spock giving Kirk a good SMACK!!

Here's the animation: http://www.lowbird.com/data/images/2012/06/tumblr-lq96pfhnuq1qlc8fao1-400.gif

My solution is a bit cumbersome for my taste, but I used the .hide() method. You just have to .show() the div again at an earlier time if you want the animation to display again. Here you go:

 $('#smackKirk').on('click', function(){
    $('#animate').show(); // not necessary in chrome     
    $('#animate').attr("src", "http://www.lowbird.com/data/images/2012/06/tumblr-lq96pfhnuq1qlc8fao1-400.gif");
    setTimeout(function() {
        $('#animate').attr('src',"");
            $('#animate').hide(); // not necessary in chrome 
    }, 2400);

Collectives™ on Stack Overflow

Remove image dynamically using jquery

4 Answers 4

1 Comment

7 Comments

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

7 Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related