欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery刪除DOM節(jié)點的方法

 更新時間：2015年06月11日 10:02:02   作者：簡明現(xiàn)代魔法  
這篇文章主要介紹了JQuery刪除DOM節(jié)點的方法,實例分析了jQuery使用remove及empty方法實現(xiàn)結點刪除的相關技巧,需要的朋友可以參考下

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

如果文檔中某一個元素多余，那么應將其刪除。JQuery提供了兩種刪除節(jié)點的方法，即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中刪除所有匹配的元素，傳入的參數(shù)用于根據(jù)JQuery表達式來篩選元素。

例如刪除<ul>節(jié)點中的第2個<li>元素節(jié)點，JQuery代碼如下：

$(".nm_ul li:eq(1)").remove();
// 獲取第二個<li>元素節(jié)點后，將它從網(wǎng)頁中刪除

運行代碼后效果將刪掉第二個節(jié)點。

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

var $li = $("nm_ul li:eq(1)").remove();
// 獲取第二個<li>元素節(jié)點后，將它從網(wǎng)頁中刪除。 
$li.appendTo("nm_ul");
// 把剛才刪除的又重新添加到<ul>元素里 
//所以，刪除只是從網(wǎng)頁中刪除，在jQuery對象中，這個元素還是存在的，我們可以重新獲取它

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

$("nm_ul li:eq(1)").appendTo("nm_ul"); 
//appendTo()方法也可以用來移動元素 
//移動元素時首先從文檔上刪除此元素，然后將該元素插入得到文檔中的指定節(jié)點

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

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

empty()方法

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

$("nm_ul li:eq(1)").empty();
// 找到第二個<li>元素節(jié)點后，清空此元素里的內(nèi)容

當運行代碼后，第2個<li>元素的內(nèi)容被清空了，只剩下<li>標簽默認的符號“.”。

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

相關文章

  • 輕松學習jQuery插件EasyUI EasyUI創(chuàng)建CRUD應用

    輕松學習jQuery插件EasyUI EasyUI創(chuàng)建CRUD應用

    這篇文章主要幫大家輕松學習jQuery插件EasyUI，并利用EasyUI創(chuàng)建CRUD應用，感興趣的小伙伴們可以參考一下
    2015-11-11
  • jQuery中removeClass()方法用法實例

    jQuery中removeClass()方法用法實例

    這篇文章主要介紹了jQuery中removeClass()方法用法,實例分析了removeClass()方法的功能、定義及從匹配元素刪除一個或多個類的使用技巧,需要的朋友可以參考下
    2015-01-01
  • jquery點擊實現(xiàn)升序降序圖標切換

    jquery點擊實現(xiàn)升序降序圖標切換

    這篇文章主要為大家詳細介紹了jquery點擊實現(xiàn)升序降序圖標切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • jquery在IE、FF瀏覽器的差別詳細探討

    jquery在IE、FF瀏覽器的差別詳細探討

    jquery在IE,FF瀏覽器差別的問題，在FF的效果很好，但是在IE上面沒有效果，當時也沒有在意，通過今天的練習發(fā)現(xiàn)，“是不是對于一些自定義的js，IE的兼容性不是太好呢
    2013-04-04
  • 基于JQuery的訪問WebService的代碼（可訪問Java[Xfire]）

    基于JQuery的訪問WebService的代碼（可訪問Java[Xfire]）

    最近有些時間學習了下JQuery，發(fā)現(xiàn)有很多JQuery訪問.net WebService的例子。作為WebService這種接口應該是通用的，為什么沒人關于Java的例子呢？這點引起我的興趣。
    2010-11-11
  • jquery實現(xiàn)checkbox 全選/全不選的通用寫法

    jquery實現(xiàn)checkbox 全選/全不選的通用寫法

    本篇文章主要是對jquery實現(xiàn)checkbox 全選/全不選的通用寫法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-02-02
  • jquery each()源代碼

    jquery each()源代碼

    jquery文檔說 each(callback)作用是以每一個匹配的元素作為上下文來執(zhí)行一個函數(shù)。就是用each來遍歷數(shù)組，來執(zhí)行同一個方法
    2011-02-02
  • 基于jQuery.i18n實現(xiàn)web前端的國際化

    基于jQuery.i18n實現(xiàn)web前端的國際化

    這篇文章主要介紹了基于jQuery.i18n實現(xiàn)web前端的國際化，具有很好的參考價值，希望對大家有所幫助
    2018-05-05
  • Jquery綁定事件(bind和live的區(qū)別介紹)

    Jquery綁定事件(bind和live的區(qū)別介紹)

    Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解，其實就和普通JS的用法差不多，只是少了一個on而已第二、三種方法都是綁定事件
    2013-08-08
  • 省市區(qū)三級聯(lián)動jquery實現(xiàn)代碼

    省市區(qū)三級聯(lián)動jquery實現(xiàn)代碼

    這篇文章主要為大家詳細紹了省市區(qū)三級聯(lián)動jquery實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-10-10

最新評論