如何将jQuery对象从DOM树中移除（不使用remove()方法）

我明确不需要使用remove()函数。
可以通过以下方式创建与DOM无关的jQuery对象：

let $element = $('<div>').addClass('myInvisibleDomObject').text('Test');

这个独立对象会在按键按下时添加到DOM中，但需要在按键释放时从DOM中移除。实际场景中它是带有流数据、video src的video元素（用于摄像头预览），比示例复杂很多。我不想克隆该视频对象或创建新流，因为这样速度太慢。

我试过appendTo(null)，但没用。单纯隐藏也不行，因为部分HTML会通过xhr请求按需替换。我需要一个干净的解决方案，而且不想把它附加到<body>这类其他元素上。

示例代码：

// $element 是上面创建的元素
// .cameraPreview 是DOM中的某个div

$(document).keydown(function(event: JQuery.Event) {
    $element.appendTo('.cameraPreview');
});

$(document).keyup(function(event: JQuery.Event) {
    $element.unappendFrom('.cameraPreview'); // 这个方法不存在
});

解决方案：使用detach()方法 #

detach()是jQuery专门为这类场景设计的方法——它会将元素从DOM树中移除，但完整保留元素的事件绑定、数据以及jQuery包装引用，完美匹配你的需求：无需重新创建/克隆元素，直接复用原对象的所有状态。

修改后的代码：

// $element 是预先创建的独立jQuery对象
// .cameraPreview 是DOM中的目标容器

$(document).keydown(function(event: JQuery.Event) {
    $element.appendTo('.cameraPreview');
});

$(document).keyup(function(event: JQuery.Event) {
    $element.detach();
});

方案优势： #

• 和remove()不同，detach()不会销毁元素的任何关联数据，你的video流、src配置都会完整保留，下次appendTo()时直接恢复到之前的状态，完全避免了重新初始化的性能损耗。
• 脱离DOM后的$element就是一个独立的jQuery对象，不需要附加到任何隐藏容器，不会干扰页面的其他DOM操作（包括xhr驱动的HTML替换）。

内容的提问来源于stack exchange，提问作者SuperNova