Clear an IMG with jQuery

Question

I\'m trying to remove the loaded image from a element, but clearing or removing the src doesn\'t do it. What to do?

HTML:

Answer 1

what about simply hiding an element:

$('img').hide();

You cannot remove an image from a tag. When you use jQuery, bear in mind that you do not deal with tags, you manupulate with DOM elements. Therefore, your tag in terms of jquery is not a tag, it is an object, a DOM element. And this is element is not a tag, IT IS an element that represents an image in DOM. So if you want to hide an image, you must hide the element.

Answer 2

This worked for me:

var $image = $('.my-image-selector');
$image.removeAttr('src').replaceWith($image.clone());

However, be wary of any event handlers that you might have attached to the image. There's always the withDataAndEvents and deepWithDataAndEvents options for jQuery clone, but I haven't tested the code with them: http://api.jquery.com/clone/#clone-withDataAndEvents

Also, if you want to do this for multiple images, you will probably have to use something like jQuery each.

I posted an identical answer on a similar question: Setting image src attribute not working in Chrome

Answer 3

This worked for me.Replacing the image attribute src within div 'custom_preview_image' to blank

field = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true); field.find('.custom_preview_image').removeAttr('src').end();

Answer 4

You can do this. First assign the image an ID

<img id='image_id' src='https://www.google.com/images/srpr/logo3w.png'>

And then remove the source attribute.

jQuery('#image_id').removeAttr('src')
jQuery('#image_id').show();

Answer 5

If you still want the element to take up the space, but being invisible, hide it with css. Give your image a class or id and hide it like:

<img id='hide' src='https://www.google.com/images/srpr/logo3w.png'>

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

Answer 6

Remove the node using

$("img").remove()

or simply hide the image using

$("img").hide()