jquery中DOM操作，删除节点的方法分别是：remove()，detach()和empty()。

为了能够更加清楚的说明，测试原代码是这样的：

1.remove()方法：

此方法的作用：节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

2. detach()方法

此方法的作用：从DOM中去掉所有匹配的元素。

通过下面的测试代码，来总结一下他们的异同吧：

首先，我们给Li 绑定一下事件，让其点击的时候把元素里的内容打印出来，即1，2，3，4；

3.remove()和detach()差异：

相同点：不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。也就是说，这个元素本身得以保留，都可以通过DOM 方法重新添加到页面上，并让其显示在想要的位置上。

不同点：只有detach()方法的所有绑定的事件、附加的数据都会保留下来；

我们会发现，使用detach()方法的之后，重新追加删除的元素以后，再点击li2的时候，弹框仍然弹出，即它之前绑定的事件还在；

相反, 使用remove()方法删除元素的话，重新追加后点击该元素说明没有效果，它之前绑定的事件已经失效。

 

 4. empty()方法

empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。效果如下图：

5.  Js删除节点的防范：

<script type=”text/javascript”>

function removeElement(_element){

var _parentElement = _element.parentNode;

if(_parentElement){

_parentElement.removeChild(_element);

}

}

</script>

js实现原理是这样的：通过先去找到要删除节点的父节点，然后在父节点中运用removeChild来移除我们想移除的节点。