CODEWITHSUNDEEP
jqueryloading-imagedynamic-attributes
Hazel
Hazel

Reputation: 73

Remove image dynamically using jquery by clearing the src attribute

I know one can load image dynamically using

$("#id").attr("src","path of the image"),

but to onload the certain image on certain event,

$("id").attr("src","")

doesn't work.

What's the correct way to unload the image runtime using jquery??

I cannot change the display or the visibility property of the image, I need to load an unload it.

Upvotes: 4

Views: 28117

Answers (4)

user7807205
user7807205

Reputation: 1

document.getElementById("ImgID").style.display = "none";
document.getElementById("ImgID").removeAttribute('src');

... ... ... ...

document.getElementById("ImgID").src = NewSrc;
document.getElementById("ImgID").style.display = "initial";

Upvotes: -1

Jaswinder Singh
Jaswinder Singh

Reputation: 21

The browser does not register any change. So passing random function will force the browser to make changes in the DOM. Below is the jquery and HTML used

$('#uploaded_image').attr('src',data+'?'+Math.random());

<img src="logo.png?1576573831" class="NO-CACHE img-responsive p-b-10" id="uploaded_image">

Upvotes: 0

Blacksad
Blacksad

Reputation: 15422

Just remove the element using ID:

$("#id").remove();

Upvotes: 0

Summved Jain
Summved Jain

Reputation: 890

There are number of ways to do this. You can use the one suits you

  1. $('#id').removeAttr('src');​ // Remove the src
  2. $('#id').remove(); //This will remove the element from DOM so be careful

  3. $('#id').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='); // This will change the src to a 1x1 pixel

  4. $('#id').removeAttr('src').replaceWith($image.clone()); //That worked for few people

Upvotes: 12

Related Questions