如何从内存中清除使用 jQuery 创建的 DOM 元素？答案

【问题标题】：How to clear DOM elements created with jQuery from memory?如何从内存中清除使用 jQuery 创建的 DOM 元素？
【发布时间】：2023-04-02 22:27:02
【问题描述】：

我的应用程序正在使用 jQuery 动态添加大量 DOM 元素。所有这些元素都放入一个主容器 div 中。

然后，每次显示新页面时，都会使用 jQuery 的 remove() 删除此容器 div；问题是，这个容器 div 的所有子项似乎仍然列在 Chrome 的 devtools 时间线中的“节点”下。

我运行应用程序的时间越长，我创建的 DOM 元素就越多！但是在查看 HTML 源代码时，节点不存在。

我的代码：

    // creating lots of jquery elements and appending them to maincontainer
    var elm = document.createElement("DIV");
    var jq = jQuery(elm).text("hello");
    maincontainer.append(jq);

    // then, the main container(also a jquery object) is removed using
    maincontainer.remove();

以这种方式从内存中清除 DOM 节点有什么问题？为什么保留在“节点”下？

【问题讨论】：

只是想知道，你有没有尝试不使用jQuery而只使用JS，结果相同？
我们能看到更多围绕该代码的代码吗？

标签： javascript jquery dom

【解决方案1】：

从页面中删除元素后，只需清除变量..这样内部存储的元素也会被清除..如果元素存储在divElements变量中，

divElements.remove();
divElements = null;

我不知道它是否适合您...但它适用于我的应用程序..

【讨论】：

你是对的。我不得不调用 remove();在每个主要容器子项上。显然，如果您不调用 remove()，jQuery 数据将保持存在 - 即使 DOM 元素已从 HTML 页面中删除！

【解决方案2】：

我会强调，它仍然存储在节点下，因为您已将该元素保留在变量中，永远使其可访问。

所以它会保留...

var elm = document.createElement("div");

因为可以再次访问该变量以执行您希望对其执行的任何操作，例如将其重新添加到页面中等等。

编辑：此外，如果您想从堆栈中“清除”变量，或者用您的术语“内存”，您可能需要考虑在本地范围内创建变量... 例如

<button type="button" id="btn-example">Click me!</button>

$(document).on("click", "#btn-example", function() {
  var elm = $('div');
  elm.remove();
});

或在原始 JS 中...

<button type="button" onclick="removeDiv();">Click me!</button>

function removeDiv() {
  var elm = document.getElementByTagName('div');
  elm.parentNode.removeChild(elm);
}

这是因为局部变量在函数激活时创建，然后在函数停止时销毁。

【讨论】：

问题是我没有调用remove();专门针对每个孩子。我刚刚从 DOM 中删除了 HTML 元素——但如果它们是使用 jQuery 创建的，那么显然会将它们保留在内存中。

【解决方案3】：

始终使用：

$("ElementName").detach()

当你想从DOM中移除一个元素时，它不会增加DOM的内存，浏览器也不会卡住。

【讨论】：