JS - how to remove image with JavaScript?
I faced a problem as to remove image with JS code like a...
<img src="image.png" id='image_X'>
开发者_JS百科...
document.getElementById('image_X').src=''
Image stays unchanged :( So my question is how to remove image with JS? To be more detailed... How to modify the image src attribute value dynamically?
Any useful comment is appreciated
var image_x = document.getElementById('image_X');
image_x.parentNode.removeChild(image_x);
http://jsfiddle.net/5DdyL/
You could just hide it. In vanilla JS that would be:
document.getElementById("image_X").style.display='none';
In jQuery:
$("#image_X").css('display', 'none');
If you really want to remove it from DOM, there is removeChild method you could invoke on the parentNode of your image element.
This should do it:
var el = document.getElementById('image_X');
el.parentNode.removeChild(el);
You can try it here.
You can neatly wrap that into a function like so:
function removeElement(ele) {
ele.parentNode.removeChild(ele);
}
removeElement(document.getElementById("image_X"));
Gets its parent and use removeChild.
var parent = getElementById('parentid');
var child = document.getElementById('imagex');
parent.removeChild(child);
To delete an image in JavaScript (or generally to delete anything), first you should grab the element, then traverse to its parent element, then you can delete the child using removeChild method.
Try using:
document.getElementByID("").style.visibilty="hidden";
when you do not want to show the image and
document.getElementById("").style.visibility="visible";
when you want to show the image.
I want to share some additional tips...
@Marecky, Thank to Jared Farrish answer I could figure out some helpful points concerning JS...
But next I had to make my own additional research as well... It is not a super fact, but a little theory tip... So, as a result, I could find that browsers, as a any desktop app, of course, are created with some kind of GUI framework... As a rule, most GUI (for example Swing) frameworks, of course, may using double buffered objects to display graphics... So when it (FF for example) re-translates script to graphic objects the GUI sync rules come to life...
...OK... Coming from GUI re-painting problems to scripting itself...
So my question was about playing around DOM objects... The fact was the img tag doesn't update UI event if the code like document.getEelementById('image_X').src='' is activated; So the <body> tag space (for some reason) , I am not sure but, is keeping some kind of 'cached' state... And maybe that makes img (if it is in body) become 'static'; So I had to find some helpful additional object which supports dynamic UI update. As a test, I used div instead of the pure body tag to keep img in it; So not to update body but div inner content only and that helped. So using JS + HTML in my case was helpful...
I hope the tip saves ones day
Try
document.getEelementById('image_X').src="''";
but it will display a broken image
1) remove img element using parent node. 2) Then, Store that parent node. 3) Then, create new img element in that parent node.
加载中,请稍侯......
精彩评论