JQuery刪除DOM節點的方法_jquery

本文實例講述了JQuery刪除DOM節點的方法。分享給大家供大家參考。具體分析如下：

如果文件中某一個元素多餘，那麼應將其刪除。 JQuery提供了兩種刪除節點的方法，分別是remove()和empty()。

HTML DOM結構如下：

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='C编程'>简单易懂的C编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery'>简单易懂的JQuery编程</li>
</ul>

remove()方法

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

例如刪除

節點中的第2個
• 元素節點，JQuery程式碼如下：

  $(".nm_ul li:eq(1)").remove();
  // 获取第二个<li>元素节点后，将它从网页中删除

  運行程式碼後效果將刪除第二個節點。

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

  var $li = $("nm_ul li:eq(1)").remove();
  // 获取第二个<li>元素节点后，将它从网页中删除。 
  $li.appendTo("nm_ul");
  // 把刚才删除的又重新添加到<ul>元素里 
  //所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它 
  
  

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

  $("nm_ul li:eq(1)").appendTo("nm_ul"); 
  //appendTo()方法也可以用来移动元素 
  //移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点
  
  

  另外remove()方法也可以透過傳遞參數來選擇性地刪除元素，JQuery程式碼如下：

  // 把<li>元素中属性title不等于"菠萝"的<li>元素删除
  $("nm_ul li").remove("li[title!=JQuery]"); 
  
  

  empty()方法

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

  $("nm_ul li:eq(1)").empty();
  // 找到第二个<li>元素节点后，清空此元素里的内容
  
  

  當運行程式碼後，第2個

• 元素的內容被清空了，只剩下
• 標籤預設的符號「.」。

  希望本文所述對大家的jQuery程式設計有所幫助。