.detached 对象去了哪里？

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 的一部分，因此不能被垃圾收集。

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

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