jQuery DOM刪除節(jié)點(diǎn)操作指南
下面示例可能用到如下HTML代碼：
<ul>
<li title="t1">蘋(píng)果</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()方法也可以通過(guò)傳遞參數(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)。
通過(guò)下面的例子，可以知道它與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àn)節(jié)點(diǎn)操作實(shí)例分析
相關(guān)文章
jQuery插件zTree實(shí)現(xiàn)刪除樹(shù)子節(jié)點(diǎn)的方法示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)刪除樹(shù)子節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹(shù)形插件zTree針對(duì)節(jié)點(diǎn)的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果，具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JQuery刪除DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery使用remove及empty方法實(shí)現(xiàn)結(jié)點(diǎn)刪除的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jquery text,radio,checkbox,select操作實(shí)現(xiàn)代碼
學(xué)習(xí)jquery的朋友看參考下，對(duì)form等文本框的一些控制實(shí)現(xiàn)代碼。2009-07-07
jquery實(shí)現(xiàn)的鼠標(biāo)懸停圖片自動(dòng)輪播效果，當(dāng)把鼠標(biāo)懸停到圖片時(shí)，圖像就會(huì)不斷循環(huán)播放，速度非?？欤Ч浅１普?，就和在放武俠片一樣，使用了jquery實(shí)現(xiàn)2015-08-08
這篇文章主要介紹了jquery實(shí)現(xiàn)增加刪除行的方法,涉及表格中行的增加與刪除技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
jQuery Datatable 多個(gè)查詢條件自定義提交事件(推薦)
這篇文章主要介紹了jQuery Datatable 多個(gè)查詢條件自定義提交事件的相關(guān)資料,需要的朋友可以參考下2017-08-08
jquery $.each 和for怎么跳出循環(huán)終止本次循環(huán)
如何在jquery 中的循環(huán)中終止本次循環(huán)或者跳出循環(huán)呢？經(jīng)搜索發(fā)現(xiàn)個(gè)不錯(cuò)的方法，大家不妨參考下，希望對(duì)大家有所幫助2013-09-09
Jquery EasyUI Datagrid右鍵菜單實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Jquery EasyUI Datagrid右鍵菜單的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jquery中ajax請(qǐng)求后臺(tái)數(shù)據(jù)成功后既不執(zhí)行success也不執(zhí)行error的完美解決方法
這篇文章主要介紹了jquery中ajax請(qǐng)求后臺(tái)數(shù)據(jù)成功后既不執(zhí)行success也不執(zhí)行error解決方法,需要的朋友可以參考下2017-12-12