JS - 如何使用 JavaScript 删除图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6802683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS - how to remove image with JavaScript?
提问by user592704
I faced a problem as to remove image with JS code like a...
我遇到了用 JS 代码删除图像的问题，例如...
<img src="image.png" id='image_X'>
...
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?
图像保持不变:(所以我的问题是如何用JS删除图像？更详细...如何动态修改图像的src属性值？
Any useful comment is appreciated
任何有用的评论表示赞赏
回答by Jared Farrish
var image_x = document.getElementById('image_X');
image_x.parentNode.removeChild(image_x);
回答by Xion
You could just hide it. In vanilla JS that would be:
你可以把它隐藏起来。在香草JS中，这将是：
document.getElementById("image_X").style.display='none';
In jQuery:
在 jQuery 中：
$("#image_X").css('display', 'none');
If you really want to remove it from DOM, there is removeChildmethod you could invoke on the parentNodeof your image element.
如果你真的想从 DOM 中删除它，removeChild你可以在parentNode你的图像元素上调用方法。
回答by karim79
This should do it:
这应该这样做：
var el = document.getElementById('image_X');
el.parentNode.removeChild(el);
You can neatly wrap that into a function like so:
你可以巧妙地将它包装成一个函数，如下所示：
function removeElement(ele) {
ele.parentNode.removeChild(ele);
}
removeElement(document.getElementById("image_X"));
回答by Jonah Katz
Gets its parent and use removeChild.
获取其父项并使用 removeChild。
var parent = getElementById('parentid');
var child = document.getElementById('imagex');
parent.removeChild(child);
回答by Saeed Neamati
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 removeChildmethod.
要在 JavaScript 中删除图像（或通常删除任何内容），首先您应该抓取元素，然后遍历其父元素，然后您可以使用removeChild方法删除子元素。
回答by Balachander
Try using:
尝试使用：
document.getElementByID("").style.visibilty="hidden";
document.getElementByID("").style.visibilty="hidden";
when you do not want to show the image and
当您不想显示图像时
document.getElementById("").style.visibility="visible";
document.getElementById("").style.visibility="visible";
when you want to show the image.
当你想显示图像时。
回答by Kamal K
1) remove img element using parent node. 2) Then, Store that parent node. 3) Then, create new img element in that parent node.
1) 使用父节点删除 img 元素。2）然后，存储该父节点。3) 然后，在该父节点中创建新的 img 元素。
回答by user592704
I want to share some additional tips...
我想分享一些额外的提示...
@Marecky, Thank to Jared Farrish answer I could figure out some helpful points concerning JS...
@Marecky，感谢 Jared Farrish 的回答，我可以找出一些有关 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...
但接下来我也必须进行我自己的额外研究......这不是一个超级事实，而是一个小理论提示......所以，结果，我可以找到浏览器，作为任何桌面应用程序，当然, 是用某种 GUI 框架创建的...作为一项规则，大多数 GUI（例如 Swing）框架当然可能使用双缓冲对象来显示图形...所以当它（例如 FF）重新翻译时脚本到图形对象 GUI 同步规则变得栩栩如生...
...OK... Coming from GUI re-painting problems to scripting itself...
...好的...从GUI重绘问题到脚本本身...
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...
所以我的问题是关于玩 DOM 对象......事实是如果像 document.getEelementById('image_X').src='' 这样的代码被激活，img 标签不会更新 UI 事件；所以<body>标签空间（出于某种原因），我不确定，但是，保持某种“缓存”状态......也许这会使 img（如果它在正文中）变成“静态”；所以我必须找到一些支持动态 UI 更新的有用的附加对象。作为测试，我使用 div 而不是纯 body 标签将 img 保留在其中；所以不要只更新 body 而是只更新 div 内部内容，这有帮助。所以在我的情况下使用 JS + HTML 是有帮助的......
I hope the tip saves ones day
我希望小费能救一天
回答by vlad
Try
尝试
document.getEelementById('image_X').src="''";
but it will display a broken image
但它会显示损坏的图像
