jQuery DOM刪除節(jié)點(diǎn)操作指南
下面示例可能用到如下HTML代碼:
<ul>
<li title="t1">蘋果</li>
<li>香蕉</li>
<li>橘子</li>
<li>葡萄</li>
<li>草莓</li>
</ul>
1、remove()方法:
作用:從DOM中刪除所有匹配的元素,傳入的參數(shù)用于根據(jù)jQuery表達(dá)式來(lái)篩選元素。
例如,刪除上圖中<ul>節(jié)點(diǎn)中的第二個(gè)<li>元素節(jié)點(diǎn),jQuery代碼如下:
$(document).ready(function() {
$("ul li:eq(1)").remove();
});
當(dāng)某個(gè)節(jié)點(diǎn)用remove()方法刪除后,該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除。這個(gè)方法的返回值是一個(gè)指向已被刪除的節(jié)點(diǎn)的引用,因此可以在以后再使用這些元素。下面的jQuery代碼說(shuō)明元素用remove()方法刪除后,還是可以繼續(xù)使用的。
var $li=$("ul li:eq(1)").remove();
$li.appendTo("ul"); //把刪除的節(jié)點(diǎn)又重新添加到<ul>元素里
可以直接使用appendTo()方法的特性來(lái)簡(jiǎn)化以上代碼:
$("ul li:eq(1)").appendTo("ul");//appendTo()方法也可以用來(lái)移動(dòng)元素,移動(dòng)元素時(shí)首先從文檔上刪除此元素,然后將該元素插入到文檔中的指定節(jié)點(diǎn)。
另外remove()方法也可以通過傳遞參數(shù)來(lái)選擇性地刪除元素:
$("ul li").remove("li[title='t1']");
2、detach()方法:
detach()和remove()一樣,也是從DOM中去掉所有匹配的元素。但需要注意的是,這個(gè)方法不會(huì)匹配的元素從jQuery對(duì)象刪除,因而可以在將來(lái)再使用這些匹配的元素。與remove()不同的是,所有綁定的事件、附件的數(shù)據(jù)等都會(huì)保留下來(lái)。
通過下面的例子,可以知道它與remove()方法的區(qū)別:
$("ul li").click(function(){
alert($(this).html());
})
var $li=$("ul li:eq(1)").detach(); //刪除元素
$li.appendTo("ul"); //重新追加此元素,發(fā)現(xiàn)它之前綁定的事件還在,如果使用remove()方法刪除元素的話,那么它之前把綁定的事件將失效;
3、empty()方法
嚴(yán)格來(lái)講,empty()方法并不是刪除節(jié)點(diǎn),而是清除節(jié)點(diǎn),它能清空元素中的所有后代節(jié)點(diǎn)。
$("ul li:eq(1)").empty();//獲取第二個(gè)<li>元素節(jié)點(diǎn)后,清空此元素里的內(nèi)容,注意是元素里。
運(yùn)行后的結(jié)果為:
當(dāng)運(yùn)行代碼后,第二個(gè)<li>元素的內(nèi)容被清空了,只剩下<li>元素默認(rèn)的符號(hào)"."。
以上就是本文所述的全部?jī)?nèi)容了,希望大家能夠喜歡。
- jQuery中each()、find()和filter()等節(jié)點(diǎn)操作方法詳解(推薦)
- jQuery DOM插入節(jié)點(diǎn)操作指南
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
- JQuery 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例
- 淺談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流
- jQuery中 DOM節(jié)點(diǎn)操作方法大全
- 有關(guān)jquery與DOM節(jié)點(diǎn)操作方法和屬性記錄
- jquery對(duì)dom節(jié)點(diǎn)的操作【推薦】
- JQuery常見節(jié)點(diǎn)操作實(shí)例分析
相關(guān)文章
checkbox:click事件觸發(fā)span元素內(nèi)容改變的方法
下面小編就為大家?guī)?lái)一篇checkbox:click事件觸發(fā)span元素內(nèi)容改變的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-09-09jQuery實(shí)現(xiàn)用戶注冊(cè)的表單驗(yàn)證示例
用戶注冊(cè)的表單往往是需要進(jìn)行驗(yàn)證的,否則會(huì)有一些不否合規(guī)則的數(shù)據(jù)入庫(kù),后果會(huì)不堪設(shè)想,下面為大家詳細(xì)介紹下通過jquery是如何實(shí)現(xiàn)的,下面有個(gè)示例,感興趣的朋友可以參考下2013-08-08jQuery接受后臺(tái)傳遞的List的實(shí)例詳解
這篇文章主要介紹了jQuery接受后臺(tái)傳遞的List的實(shí)例詳解的相關(guān)資料,這里提供了前臺(tái)代碼和后臺(tái)代碼的實(shí)現(xiàn),需要的朋友可以參考下2017-08-08jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
這是一款使用jQuery和CSS3制作的效果非常炫酷的折疊卡片式下拉列表框特效,感興趣的小伙伴們可以參考一下2015-11-11jQuery多個(gè)版本和其他js庫(kù)沖突的解決方法
jQuery多個(gè)版本或和其他js庫(kù)沖突主要是常用的$符號(hào)的問題,該怎么解決呢?下面小編給大家?guī)?lái)了jQuery多個(gè)版本和其他js庫(kù)沖突的解決方法,一起看下吧2016-08-08HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果(附demo源碼下載)
這篇文章主要介紹了HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果,詳細(xì)分析了Quicksand插件的使用及圖片浮動(dòng)顯示的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程
這篇文章主要介紹了在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程,需要的朋友可以參考下2014-04-04