jQuery元素从DOM中删除但似乎存储在内存中？

Question

我有一个按钮单击事件,它抓取与选中的复选框相关联的名称,并将它们添加到<ul>页面右侧的复选框中.这工作得很好,那么我还有一个按钮,将捞出<li>的检查与checkboxes从<ul>.这很有用.当你去添加一个已从右侧删除的项目时,问题就来了.该项目不在页面上,因此它显然已从DOM中删除,但就好像它仍然存储在浏览器内存中一样.如何清除内存？代码如下.

$('.add-people').click(function () {
   $('.add-names:checked').each(function () {
      var name = $(this).parent().siblings('td.name-cell').html();
      if ($('ul.group-list').find(':contains(' + name + ')').length) {
         //Name is already in list
      } else {
         var newLi = '<li><input id="name" class="remove-names" type="checkbox" name="' + name + '"><span>' + name + '</span></li>'
         $('ul.group-list').append(newLi);                        
      }
   });
});

$('.remove-people').click(function () {
    $('.remove-names:checked').each(function () {
        $(this).parent().remove();
    });
});

Answer 1

一旦从DOM中删除了DOM元素,只有存在对DOM元素的引用的javascript代码时,它才会保持活动状态.如果没有对DOM元素本身的javascript引用,那么在下一次垃圾收集扫描期间,浏览器将对其进行垃圾回收.

A reference in javascript表示保存DOM节点的javascript变量,数组,属性等.在上面的代码中,我没有看到任何持久的变量,所以我没有看到为什么DOM节点不会从这段特定的代码中被垃圾收集的任何原因.

为什么你认为它存储在浏览器内存中？

要确保从内存中清除DOM元素,您需要做两件事:

1. 从DOM中删除它.
2. 确保没有javascript变量通过将它们设置为null或任何其他值或确保它们超出范围来保持对它的引用,以便变量本身被销毁(从而也释放它们的引用).

就是这样,没有别的.