logo标签列表

jQuery：按ID删除元素

javascriptjquery
22

我有一个问题需要解决，目前的解决方法需要移除一些元素。

<div id="toremove">
    // some JavaScript here
</div>
所以我有一个执行某些操作的函数，当它完成后，我希望它删除"toremove"元素。我查看了jQuery文档、互联网上的类似帖子，但似乎都没有起作用。
这是我正在做和尝试过的：
$("#toremove") = $()
$("#toremove").empty();
$("#toremove").remove();

对我来说似乎什么都不起作用，非常感激任何帮助。

12
$('#toremove').remove()是正确的。如果这行代码不起作用，那么问题可能出在其他地方。 - We Are All Monica
1
你是否在 onDomReady 中编写了类似于 $(function(){...}); 的代码，其中包含 $("#toremove").remove();？ - Himanshu Tyagi
1
确保您只有一个具有该ID的项目...如果不是这样，可能会发生奇怪的事情。 - Jesus Lugo
当我使用'#toremove'而不是"#toremove"时，它起作用了，但是我在该div中的js仍然以某种神奇的方式执行。 - marko
6个回答
46

$('#toremove').remove();应该是你需要的。你确定代码中没有其他问题吗？

示例

这个方法可行，但我的问题是该 div 中的 <js> 仍然会执行。 - marko
3
您可以采取其他处理此问题的方法，我将向您展示我所知道的以下方式。（请挑选您喜欢的任何一种）"
<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>
2
也许你想要在 div 还没有创建时就将其删除了。
可以这样做：
$(function(){
    $("#id").remove();
});

这将确保DOM已准备就绪。

还要确保您的id是唯一的！

1

$("#id").remove(); 应该可以正常工作。

演示

你可能会遇到的问题：

可能你没有在代码周围使用 $(function() { });，这告诉jquery要等待所有html元素加载完成才执行代码。( 短形式为 $(document).ready(function() { }) );

0

试一下这个：

<div id="toremove">
    ...some javascript here....
</div>

相应的 jQuery：

$("#toremove").click(function() {
    $("#toremove").remove();
});

工作演示：http://jsfiddle.net/86z93dzk/（请注意JS是在onDomready加载的）

因此，在您的情况下，您可以将jQuery代码放在任何地方，并用$(document).ready包装它：

$(document).ready(function() {
    $("#toremove").click(function() {
        $("#toremove").remove();
    });
 });
0
使用CSS：它更简单，即使对于动态元素（如JSP等）也可以工作。一个不好的地方是，不显示的元素仍然存在于页面源中。
<style>
 #toremove {
  display: none;
 }
</style>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接