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點選有原來的事件。