DOM节点的删除

empty()

移除指定元素中的所有子节点。

<div id="test">
        <p>p元素1</p>
        <p>p元素2</p>
</div>

$("#test").empty()

通过empty移除了当前div元素下的所有p元素,但是本身id=test的div元素没有被删除。

remove()有参与无参

remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

remove可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点。

<div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
</div>

$("p").remove(":contains('3')")

找到所有p元素中，包含了3的元素。如果要删除整个test2节点，用$("test2").remove()即可。

detach

从当前页面中移除该元素，但保留这个元素的内存模型对象。$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。

    <script type="text/javascript">
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; 
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        $("body").append(p);
    });
    </script>

通过 $("p").detach()把所有的P元素删除后，再通过append把删除的p元素放到页面上。if语句用于消除重复，不然两次点击#bt1则会重复给p赋值，bt2也加不回来了。

detach与remove的区别

detach与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

<script type="text/javascript">
    //给页面上2个p元素都绑定事件
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })

    $("button:first").click(function() {
        var p = $("p:first").remove();
        p.css('color','red').text('p1通过remove处理后,点击该元素,事件丢失')
        $("body").append(p);
    });

    $("button:last").click(function() {
        var p = $("p:first").detach();
        p.css('color','blue').text('p2通过detach处理后,点击该元素事件存在')
        $("body").append(p);
    });
</script>

remove后的$("body").append(p),点击没有事件，而detach后append点击有原来的事件。