javascript - .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 变量创建对分离元素的子元素的引用，并将阻止该元素被垃圾收集，至少在按钮超出范围之前。

编辑:

为了让某些东西被垃圾回收，它需要从 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 将保留对作为#b 一部分的元素#c 的引用，因此不能被垃圾回收。

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

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