jQuery 刪除/替換DOM元素的幾種方式

更新時(shí)間：2014年05月20日 09:08:06 作者：

在結(jié)果集后鏈?zhǔn)秸{(diào)用remove()方法即可刪除也可以通過(guò)向remove傳參的形式來(lái)過(guò)濾選擇結(jié)果再執(zhí)行remove操作

刪除

刪除操作非常簡(jiǎn)單，直接在結(jié)果集后鏈?zhǔn)秸{(diào)用remove()方法即可。

例如，要?jiǎng)h除以下html腳本中所有的a元素，直接通過(guò)

復(fù)制代碼代碼如下:

$('a'.remove();

就可以做到了。

復(fù)制代碼代碼如下:

 
<h3>Anchors</h3> 
<a href="#" class="remove">Anchor Element</a> 
<a href="#">Anchor Element</a> 
<a href="#" class="remove">Anchor Element</a> 

當(dāng)然也可以通過(guò)向remove傳參的形式來(lái)過(guò)濾選擇結(jié)果，然后再執(zhí)行remove操作。

復(fù)制代碼代碼如下:

$('a').remove('.remove');

需要注意的是

remove操作并不會(huì)把符合條件的元素從結(jié)果集中刪除，所以理論上可以繼續(xù)操作被"刪除"掉的元素
remove操作不但會(huì)“刪除”元素與所有元素相關(guān)的數(shù)據(jù)也會(huì)被刪除(event handlers、internally cached data)

替換

如果想要把class為remove的li元素替換為<li>removed</li>，可以使用以下兩種等價(jià)的方法

復(fù)制代碼代碼如下:

 
$('li.remove').replaceWith('<li>removed</li>); 
$('<li>removed</li>;).replaceAll('li.remove'); 

您可能感興趣的文章:

相關(guān)文章

jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)
回調(diào)函數(shù)就是一個(gè)通過(guò)函數(shù)指針調(diào)用的函數(shù).這篇文章主要介紹了jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
jQuery EasyUI API 中文文檔 - TreeGrid 樹(shù)表格使用介紹
jQuery EasyUI API 中文文檔 - TreeGrid 樹(shù)表格使用介紹，需要的朋友可以參考下。
2011-11-11
基于jquery-resizable創(chuàng)建可調(diào)整大小的表(table)格
本文介紹如何基于jquery-resizable實(shí)現(xiàn)可調(diào)整表格(table)列寬的代碼,需要的朋友可以參考下
2023-06-06
jQuery頁(yè)面圖片伴隨滾動(dòng)條逐漸顯示的小例子
jQuery頁(yè)面圖片伴隨滾動(dòng)條逐漸顯示的小例子，需要的朋友可以參考一下
2013-03-03
JQuery 中幾個(gè)類選擇器的簡(jiǎn)單使用介紹
類選擇器想必很多喜歡jquery的朋友早早就涉及到了吧，它們的使用也應(yīng)該了如指掌了吧，接下來(lái)幫大家溫習(xí)下幾個(gè)簡(jiǎn)單類選擇器的使用方法，感興趣的你可以參考下哈，希望對(duì)你有所幫助
2013-03-03
jquery 圖片點(diǎn)擊放大預(yù)覽功能詳解
這篇文章主要介紹了jquery 圖片點(diǎn)擊放大預(yù)覽功能,結(jié)合實(shí)例形式詳細(xì)分析了jquery 圖片點(diǎn)擊放大預(yù)覽功能相關(guān)實(shí)現(xiàn)步驟、
2023-06-06
jQuery的實(shí)現(xiàn)原理的模擬代碼 -5 Ajax
對(duì)于 xhr 對(duì)象來(lái)說(shuō)，我們主要通過(guò)異步方式訪問(wèn)服務(wù)器，在 onreadystatechange 事件中處理服務(wù)器回應(yīng)的內(nèi)容。簡(jiǎn)單的 xhr 使用如下所示。
2010-08-08
jQuery中l(wèi)ive方法的重復(fù)綁定說(shuō)明
使用jQuery的live()方法綁定事件，有時(shí)會(huì)出現(xiàn)重復(fù)綁定的情況，如，當(dāng)點(diǎn)擊一個(gè)按鈕時(shí)，此按鈕所綁定的事件會(huì)并執(zhí)行n遍
2011-10-10
jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例
animate是jq的一個(gè)特效的函數(shù)方法，animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫。該方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。
2014-04-04
jQuery+CSS實(shí)現(xiàn)一個(gè)側(cè)滑導(dǎo)航菜單代碼
側(cè)滑菜單在網(wǎng)站設(shè)計(jì)中應(yīng)用比較廣泛，在許多網(wǎng)站上都可以看到此種類型的菜單。本文給大家介紹jQuery+CSS實(shí)現(xiàn)一個(gè)側(cè)滑導(dǎo)航菜單代碼，需要的朋友參考下吧
2016-05-05