HTML/Javascript remove data from img src attribute

I suggest you replace the image with a new one. In jQuery you could do something like :

$('#yourImage').replaceWith('<img src="" id="yourImage" />');

Technically, a image tag is required to have a src attribute AND it is supposed to NOT be empty. However, the W3C specification isn't clear on how to handle the cases when the src attribute is empty. As a result, every browser is handling this situation slightly differently.

There are actually quite a few problems that can arise from this lack in specification, yours is just one of them. A more detailed look at this issue can be found here.

As others have pointed out, it is much more preferable to hide/show the image through CSS (either visibility:none if you want to keep the space occupied, or display:none if you want the image to completely disappear). Alternatively, you can simply remove the complete image tag using JS and create a new image when you want to insert it back.


I handle this issue by blow code and work for me:

document.getElementById('tst').removeAttribute('src');