jQuery DOM刪除節點操作指南_jquery

下面範例可能用到以下HTML程式碼：

複製程式碼 程式碼如下:

 
• 蘋果

 
• 香蕉

 
• 橘子

 
• 葡萄

 
• 草莓

1、remove()方法：

作用：從DOM中刪除所有符合的元素，傳入的參數用於根據jQuery表達式來篩選元素。

例如，刪除上圖

節點中的第二個
• 元素節點，jQuery程式碼如下：
  複製程式碼 程式碼如下:
  
  $(document).ready(function() {
     $("ul li:eq(1)").remove();
  });
  

  當某個節點被remove()方法刪除後，該節點所包含的所有後代節點將同時刪除。這個方法的回傳值是一個指向已刪除的節點的引用，因此可以在以後再使用這些元素。下面的jQuery程式碼說明元素用remove()方法刪除後，還是可以繼續使用的。

  複製程式碼 程式碼如下:
  
  var $li=$("ul li:eq(1)").remove();
  $li.appendTo("ul");   //把刪除的節點又重新加入

  元素裡
  

  可以直接使用appendTo()方法的特性來簡化上述程式碼：

  複製程式碼 程式碼如下:
  
  $("ul li:eq(1)").appendTo("ul");//appendTo()方法也可以用來移動元素，移動元素時首先從文件上刪除此元素，然後將該元素插入到文檔中的指定節點。
  

  另外remove()方法也可以透過傳遞參數來選擇性地刪除元素：

  複製程式碼 程式碼如下:
  
  $("ul li").remove("li[title='t1']");
  

  2、detach()方法：

  detach()和remove()一樣，也是從DOM中去掉所有符合的元素。但要注意的是，這個方法不會符合的元素從jQuery物件刪除，因而可以在將來再使用這些符合的元素。與remove()不同的是，所有綁定的事件、附件的資料等都會保留下來。

  透過下面的例子，可以知道它與remove()方法的差別：

  複製程式碼 程式碼如下:
  
  $("ul li").click(function(){
     alert($(this).html());
  })
  var $li=$("ul li:eq(1)").detach();  //刪除元素
  $li.appendTo("ul");  //重新追加此元素，發現它之前綁定的事件還在，如果使用remove()方法刪除元素的話，那麼它之前把綁定的事件將失效；
  

  3、empty()方法

  嚴格來講，empty()方法不是刪除節點，而是清除節點，它能清空元素中的所有後代節點。

  複製程式碼 程式碼如下:
  
  $("ul li:eq(1)").empty();//取得第二個
• 元素節點後，清空此元素裡的內容，注意是元素裡。
  

運行後的結果為：

當運行程式碼後，第二個

元素的內容被清空了，只剩下

元素預設的符號"."。

以上就是本文所述的全部了，希望大家能夠喜歡。