jQuery.remove() 函數使用詳解

remove()函數用於從文件中移除符合的元素。

你也可以使用選擇器進一步縮小移除的範圍，只移除目前符合元素中符合指定選擇器的部分元素。

與detach()相比，remove()函數會同時移除與元素關聯綁定的附加資料( data()函數)和事件處理器等(detach()會保留)。

此函數屬於jQuery物件(實例)。

語法

jQueryObject.remove( [ selector ] )

參數

參數 描述

selector 可選/String類型指定的選擇器字串，用於篩選符合該選擇器的元素。

如果沒有指定selector參數，則移除目前符合元素中的所有元素。

傳回值

remove()函數的回傳值為jQuery類型，傳回目前jQuery物件本身。

範例&說明

remove()函數用於從文件中移除符合的元素：

段落文字1item1 line2

段落文字2item2line2line2

#

段落文字1

段落文字2

以下面這段HTML程式碼為例：

    [span#n2]    

#

    [label# n4]

    段落內容

    [span#n6][span#n7​​]    

以下jQuery範例程式碼用於示範remove()函數的具體用法：

var $n6 = $("#n6");

#// 移除n6元素

$n6.remove( );

var $p = $("p");

// 移除帶有類別名稱"mark"的p元素

var $removedP = $p.remove( ".mark" ); // $removedP === $p

// 將移除了的n6追加到body元素內的起始位置

// 雖然在前面n6已經從文檔中被移除

// 但不會將其從jQuery物件中移除，因此我們也可以使用該jQuery對象，將n6再次放入文檔中

$n6.prependTo( "body" );

運行程式碼(其他程式碼請自行複製到演示頁面運行)

上述程式碼執行後的完整html程式碼如下(格式未作任何調整)：

[span#n6][span# n7]

    段落內容    

#

remove()函數會移除文件中符合的元素，但不會將匹配元素從jQuery物件中移除，不過remove()只會保留元素本身，其他的諸如元素所關聯的附加資料和綁定事件等都會移除

請參考下面這段HTML代碼：

   

     

#< ;/p>

接著，我們為所有的按鈕註冊點擊事件，然後移除元素n3，再將移除的n3重新追加到n1內部的末尾位置：

var $ n3 = $("#n3");

$n3.data("myX", "附加資料");

document.writeln( $n3. data("myX") ); // 附加資料

$n3.trigger("click"); // 彈出提示框資訊：按鈕2

// 移除元素n3

$n3.remove();

// 將n3重新追加到n1內部的結尾

$n3.appendTo("#n1");

// 此時，n3的附加資料和綁定的點擊事件都已被移除

document.writeln( $n3.data("myX") ); // undefined

$n3.trigger("click"); // 無任何事件回應

如果點擊事件是直接在元素節點中以內聯屬性的形式註冊的，則remove()無法移除這種形式的註冊事件：

onclick="alert('無法移除該點擊事件');" />

以上是jQuery.remove() 函數使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！