CODEWITHSUNDEEP
jquery
Hazel
Hazel

Reputation: 73

Remove image dynamically using jquery

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

Upvotes: 0

Views: 5714

Answers (4)

armand5000
armand5000

Reputation: 13

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);

Upvotes: 0

11684
11684

Reputation: 7507

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");

Upvotes: 0

Mike Brant
Mike Brant

Reputation: 71384

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');

Upvotes: 1

Mithrandir
Mithrandir

Reputation: 25337

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

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

Upvotes: 1

Related Questions