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

Question

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

然后，每次显示新页面时，都会使用jQuery的remove（）移除此容器div; 问题是，似乎这个容器div的所有孩子似乎仍被列在＆＃34; Nodes＆＃34;在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节点有什么问题？为什么它们保留在＆＃34;节点＆＃34;？

之下

Answer 1

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

divElements.remove();
divElements = null;

我不知道它可能是你的解决方案......但它适用于我的应用程序..

Answer 2

我会按下，它仍然存储在节点下，因为你已经在变量中保留了该元素，永远使它可以访问。

所以它会保留......

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

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

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

<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);
}

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

Answer 3

始终使用：

$("ElementName").detach()

当您要从DOM中删除元素时，它不会增加DOM的内存并且浏览器不会卡住。