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

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

然后，每次显示新页面时，使用jQuery的remove（）移除此容器div; 问题是，似乎这个容器div的所有孩子似乎仍然被列在Chrome的devtools时间轴中的“Nodes”下。

我运行应用程序的时间越长，我创建的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节点有什么问题？ 为什么它们保留在“节点”下？

Answer 1

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

 divElements.remove(); divElements = null; 

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

Answer 2

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

所以它会保留……

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

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

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

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

或者在原始的JS中……

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

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

Answer 3

始终使用：

$("ElementName").detach()

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