首頁 > web前端 > js教程 > JQuery刪除DOM節點的方法_jquery

JQuery刪除DOM節點的方法_jquery

WBOY
發布: 2016-05-16 15:55:59
原創
2174 人瀏覽過

本文實例講述了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程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板