.detach-ed 对象去哪里了？

Question

我有这样的事情：
//html

<div class="panel">
    <div class="tools">
        <a href="#action1">Action 1</a>
        <a href="#action1">Action 1</a>
        <a href="#action1">Action 1</a>
    </div>
    <div class="list">
        <table>...</table>
    </div>
</div>

//JavaScript (jQuery)

var lookup = $('.panel'),
    buttons = lookup.find('.tools').detach().find('a');
...
//append buttons somewhere

所以，在这里我将'.tools' 与'.panel' 分离，然后我拿起按钮并将它们附加到其他地方。但是'.tools' 节点呢？它是否被垃圾收集？我是否必须保存分离的'.tools'，从中取出按钮而不是销毁它？

如果它的问题 - html 部分是通过 AJAX 请求接收的，并且所有这些代码都在 success 处理程序中。

Answer 1

在这种情况下，buttons 变量创建一个对分离元素的子元素的引用，并且会阻止该元素被垃圾回收，至少在buttons超出范围之前。

编辑：

为了让某些东西被垃圾回收，它需要从 DOM 中分离出来，并且不能有 JavaScript 变量引用该元素（或分离的节点树中的任何元素）

例如：

<div id="a">
  <div id="b">
    <div id="c">
        <div id="d"></div>
    </div>
  </div>
</div>

如果您想分离“#b”并对其进行垃圾回收，则不能有任何变量指向元素 b、c 或 d。

这行不通：

var c = $('#c')

$('#b').detach()

var c 会保留对元素#c 的引用，它是#b 的一部分，因此不能被垃圾回收。

这也不起作用，因为 detach 会返回对您要分离的元素的引用。

var b = $('#b').detach()