如何使用 jQuery 销毁 DOM 元素？

Posted 2023-05-09

【中文标题】如何使用 jQuery 销毁 DOM 元素？

【英文标题】：How to destroy a DOM element with jQuery?

【发布时间】：2010-11-26 09:09:12

【问题描述】：

假设 jQuery 对象是$target。

【参考方案1】：

$target.remove(); 是你要找的吗？

https://api.jquery.com/remove/

【讨论】：

当然这只是将它从可见文档中删除。如果 javascript 中有其他对节点的引用，例如 $target 变量本身，则该对象将暂时逃离垃圾收集器。如果您想销毁它，您还必须丢失对它的所有引用。不过，我不太确定您为什么要销毁 DOM 元素。也许你只是讨厌 $target。可怜的 $target，它对你做了什么？

$target 一个人的时候很善良，但是当他和他的 100,000 个克隆朋友在一起时他会变得很讨厌。

.empty()会有类似的效果吗？

@SaurabhNanda - Empty 将删除对象的内容，但不会删除（或销毁）对象本身。

【参考方案2】：

如果你想完全摧毁目标，你有几个选择。首先，您可以如上所述从 DOM 中删除对象...

console.log($target);   // jQuery object
$target.remove();       // remove target from the DOM
console.log($target);   // $target still exists

选项 1 - 然后将 target 替换为 空 jQuery 对象 (jQuery 1.4+)

$target = $();
console.log($target);   // empty jQuery object

选项 2 - 或完全删除该属性（如果您在其他地方引用它会导致错误）

delete $target;
console.log($target);   // error: $target is not defined

更多阅读：info about empty jQuery object和info about delete

【讨论】：

为什么delete $target 不起作用：perfectionkills.com/understanding-delete/#misconceptions 为什么$target=null 不起作用？

@LeeGee - 您能否总结一下您的帖子以解释为什么删除不适用于 jQuery 对象？为什么当我们最后查看 console.log($target) 时它似乎有效？谢谢。

我无法比引用的文章更好地解释它，我发现它非常详细。

作为记录，这在控制台中有效，因为控制台在 eval 范围内评估 JS，它允许删除。 “自然”范围内的变量将不可删除。请改用$target=null。它速度更快，并且不会干扰内部浏览器优化。

删除没问题。这只是意味着该块不会被 JS 引擎优化。在大多数情况下，这完全无关紧要。当它成为问题时，您会寻找使用删除的方法。以前没有。

【参考方案3】：

您正在寻找.remove() 函数。

http://docs.jquery.com/Manipulation/remove

【参考方案4】：

不确定是不是只有我一个人，但如果您按 id 选择，使用 .remove() 似乎不起作用。

例如：$("#my-element").remove();

我不得不改用元素的类，否则什么都没有发生。

例如：$(".my-element").remove();