嘿，这个问题问到点子上了！首先明确说：原生JavaScript并没有一个叫detach()的内置函数，但我们完全可以用原生API实现和jQuery detach()一模一样的效果——也就是把元素从DOM中移除，但保留它的所有事件监听器、属性和内部结构，之后还能重新插入DOM复用。

先搞懂jQuery detach()的核心逻辑 #

它的本质就是：把元素从DOM树里“摘”下来，但不销毁这个元素对象，你拿着这个对象的引用，随时能把它放回DOM里，而且之前绑定的事件、挂载的数据都不会丢失。

原生JS的替代方案 #

其实现代浏览器里，原生的element.remove()方法已经能做到大部分需求了。只要你保留了对该元素的变量引用，执行element.remove()后，元素只是脱离了DOM，并没有被销毁，所有的事件监听器（用addEventListener绑定的）、属性都会保留。比如：

// 获取要操作的元素
const targetEl = document.getElementById('target');

// 从DOM中移除元素（但元素对象还在）
targetEl.remove();

// 过一会儿再把它插回DOM里
document.body.appendChild(targetEl);

这样操作后，targetEl之前绑定的点击事件之类的都会正常工作，和jQuery detach()的效果完全一致。

如果你想封装成类似detach()的函数 #

嫌每次写remove()麻烦的话，可以自己封装一个极简版的detach函数：

function detach(element) {
  // 先检查元素是否还在DOM中
  if (element && element.isConnected) {
    element.remove();
  }
  // 返回元素引用，方便后续复用
  return element;
}

// 使用示例
const myEl = detach(document.querySelector('.my-class'));
// 之后插回DOM
document.querySelector('.container').appendChild(myEl);

这个函数和jQuery的detach()用法几乎一样，传入元素就会把它从DOM中移除，同时返回元素本身供你后续操作。

补充说明 #

如果是兼容非常老的浏览器（比如IE11及以下），element.remove()不支持的话，可以用element.parentNode.removeChild(element)来替代，逻辑是一样的：

function detach(element) {
  if (element && element.parentNode) {
    element.parentNode.removeChild(element);
  }
  return element;
}

总之，虽然原生JS没有现成的detach()函数，但用现有的API完全能实现相同的功能，而且写法也很简洁~

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