javascript jQuery：按 id 删除元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25372180/
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
jQuery: remove element by id
提问by marko
I have a problem that I'm trying to solve, the current way of doing it requires that I remove elements.
我有一个要解决的问题，目前的解决方法要求我删除元素。
<div id="toremove">
// some JavaScript here
</div>
So I have a function that does something nice, then when that finishes I'd like it to remove the "toremove"element. I have looked at the jQuery documentation, similar posts allover the Internet but nothing seems to work.
所以我有一个函数可以做一些很好的事情，然后当它完成时我希望它删除"toremove"元素。我查看了 jQuery 文档，互联网上有类似的帖子，但似乎没有任何效果。
Here's what I'm doing and have tried:
这是我正在做并尝试过的：
$("#toremove") = $()
$("#toremove").empty();
$("#toremove").remove();
Nothing seems to work for me, any help is appreciated.
似乎没有什么对我有用，任何帮助表示赞赏。
回答by anthony.martin
回答by jvecsei
$("#id").remove();should work.
$("#id").remove();应该管用。
Problems you might have with your code:
您的代码可能遇到的问题：
Maybe you aren't using the $(function() { });around your code which tells jquery to wait until all html elements are loaded. ( short form for $(document).ready(function() { }));
也许您没有$(function() { });在代码周围使用它告诉 jquery 等待所有 html 元素都加载完毕。（简称$(document).ready(function() { })）；
回答by PaulDapolito
Give this a try:
试试这个：
<div id="toremove">
...some javascript here....
</div>
Corresponding jQuery:
对应的jQuery：
$("#toremove").click(function() {
$("#toremove").remove();
});
Working Demo: http://jsfiddle.net/86z93dzk/(notice that the JS is loaded onDomready)
工作演示：http: //jsfiddle.net/86z93dzk/（注意JS已加载onDomready）
Thus, in your case, you could put the jQuery code anywhere and wrap it with $(document).ready:
因此，在您的情况下，您可以将 jQuery 代码放在任何地方并将其包装为$(document).ready：
$(document).ready(function() {
$("#toremove").click(function() {
$("#toremove").remove();
});
});
回答by Himanshu Tyagi
Maybe you are removing the divwhen its not even created.
也许您正在删除div它甚至还没有创建的时候。
do something like this :
做这样的事情：
$(function(){
$("#id").remove();
});
This will make sure the domis ready.
这将确保dom准备就绪。
Also see to it that your id is unique!
还要注意您的 id 是unique！
回答by Willie Cheng
You can do other of the way to deal with this issue, I will show you I know as following.( please pick anyone up you like)
你可以用其他方式来处理这个问题，我会告诉你我知道如下。（请选择你喜欢的任何人）
<html>
<body>
<div id="toremove">
...some javascript here....
</div>
</body>
</html>
<script src="jquery-3.3.1.min.js"></script>
<script>
$('#toremove').html(''); // option 1
$('#toremove').attr('style', 'display:none') // option 2
$('#toremove').attr('style', 'visibility:hidden') // option 3
$('#toremove').remove(); // option 4
$('#toremove').hide(); // option 5
</script>
回答by Leopold Cat
Use CSS: it's much simpler, and works even for dynamic elements (JSP, etc.). One bad thing: the no-displayed element still exists in the page source.
使用 CSS：它更简单，甚至适用于动态元素（JSP 等）。一件坏事：未显示的元素仍然存在于页面源中。
<style>
#toremove {
display: none;
}
</style>
