JQuery刪除DOM節(jié)點的方法
本文實例講述了JQuery刪除DOM節(jié)點的方法。分享給大家供大家參考。具體分析如下:
如果文檔中某一個元素多余,那么應(yīng)將其刪除。JQuery提供了兩種刪除節(jié)點的方法,即remove()和empty()。
HTML DOM結(jié)構(gòu)如下:
<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表達(dá)式來篩選元素。
例如刪除<ul>節(jié)點中的第2個<li>元素節(jié)點,JQuery代碼如下:
$(".nm_ul li:eq(1)").remove(); // 獲取第二個<li>元素節(jié)點后,將它從網(wǎng)頁中刪除
運行代碼后效果將刪掉第二個節(jié)點。
當(dāng)某個節(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()方法
嚴(yán)格來講,empty()方法并不是刪除節(jié)點,而是清空節(jié)點,它能清空元素中的所有后代節(jié)點。JQuery代碼如下:
$("nm_ul li:eq(1)").empty(); // 找到第二個<li>元素節(jié)點后,清空此元素里的內(nèi)容
當(dāng)運行代碼后,第2個<li>元素的內(nèi)容被清空了,只剩下<li>標(biāo)簽?zāi)J(rèn)的符號“.”。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- 解決jquery中動態(tài)新增的元素節(jié)點無法觸發(fā)事件問題的兩種方法
- jquery.jstree 增加節(jié)點的雙擊事件代碼
- jQuery:節(jié)點(插入,復(fù)制,替換,刪除)操作
- jQuery的DOM操作之刪除節(jié)點示例
- JQuery給元素添加/刪除節(jié)點比如select
- jquery 刪除節(jié)點 添加節(jié)點 找兄弟節(jié)點的簡單實現(xiàn)
- jQuery修改DOM結(jié)構(gòu)_動力節(jié)點Java學(xué)院整理
- jquery的父子兄弟節(jié)點查找示例代碼
- JQuery查找DOM節(jié)點的方法
- jQuery實現(xiàn)查找最近父節(jié)點的方法
- jQuery實現(xiàn)對網(wǎng)頁節(jié)點的增刪改查功能示例
相關(guān)文章
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建CRUD應(yīng)用
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI,并利用EasyUI創(chuàng)建CRUD應(yīng)用,感興趣的小伙伴們可以參考一下2015-11-11jquery點擊實現(xiàn)升序降序圖標(biāo)切換
這篇文章主要為大家詳細(xì)介紹了jquery點擊實現(xiàn)升序降序圖標(biāo)切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07基于JQuery的訪問WebService的代碼(可訪問Java[Xfire])
最近有些時間學(xué)習(xí)了下JQuery,發(fā)現(xiàn)有很多JQuery訪問.net WebService的例子。作為WebService這種接口應(yīng)該是通用的,為什么沒人關(guān)于Java的例子呢?這點引起我的興趣。2010-11-11jquery實現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對jquery實現(xiàn)checkbox 全選/全不選的通用寫法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02基于jQuery.i18n實現(xiàn)web前端的國際化
這篇文章主要介紹了基于jQuery.i18n實現(xiàn)web前端的國際化,具有很好的參考價值,希望對大家有所幫助2018-05-05Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解,其實就和普通JS的用法差不多,只是少了一個on而已第二、三種方法都是綁定事件2013-08-08省市區(qū)三級聯(lián)動jquery實現(xiàn)代碼
這篇文章主要為大家詳細(xì)紹了省市區(qū)三級聯(lián)動jquery實現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10