'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.

jqueryloading-imagedynamic-attributes


Solution 1:[1]

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

Solution 2:[2]

Just remove the element using ID:

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

Solution 3:[3]

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

Solution 4:[4]

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

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Floern
Solution 2 Prakash Pazhanisamy
Solution 3 Jaswinder Singh
Solution 4 Hkachhia

Related Questions