jQuery 刪除/替換DOM元素的幾種方式
更新時(shí)間：2014年05月20日 09:08:06 作者：
在結(jié)果集后鏈?zhǔn)秸{(diào)用remove()方法即可刪除也可以通過向remove傳參的形式來過濾選擇結(jié)果再執(zhí)行remove操作
刪除
刪除操作非常簡單，直接在結(jié)果集后鏈?zhǔn)秸{(diào)用remove()方法即可。
例如，要?jiǎng)h除以下html腳本中所有的a元素，直接通過
$('a'.remove();
就可以做到了。
<h3>Anchors</h3>
<a href="#" class="remove">Anchor Element</a>
<a href="#">Anchor Element</a>
<a href="#" class="remove">Anchor Element</a>
當(dāng)然也可以通過向remove傳參的形式來過濾選擇結(jié)果，然后再執(zhí)行remove操作。
$('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à)的方法
$('li.remove').replaceWith('<li>removed</li>);
$('<li>removed</li>;).replaceAll('li.remove');
刪除操作非常簡單，直接在結(jié)果集后鏈?zhǔn)秸{(diào)用remove()方法即可。
例如，要?jiǎng)h除以下html腳本中所有的a元素，直接通過
復(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)然也可以通過向remove傳參的形式來過濾選擇結(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');
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)長按按鈕觸發(fā)事件的方法
- JQuery自動(dòng)觸發(fā)事件的方法
- JQuery文本改變觸發(fā)事件如聚焦事件、失焦事件
- jQuery如何使用自動(dòng)觸發(fā)事件trigger
- jquery 查找select ,并觸發(fā)事件的實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)回車鍵觸發(fā)事件(實(shí)例講解)
- jquery實(shí)現(xiàn)按Enter鍵觸發(fā)事件示例
- JQuery觸發(fā)事件例如click
- jquery實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
- jquery選擇器排除某個(gè)DOM元素的方法（實(shí)例演示）
- jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
相關(guān)文章
jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)
回調(diào)函數(shù)就是一個(gè)通過函數(shù)指針調(diào)用的函數(shù).這篇文章主要介紹了jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹，需要的朋友可以參考下。2011-11-11
基于jquery-resizable創(chuàng)建可調(diào)整大小的表(table)格
本文介紹如何基于jquery-resizable實(shí)現(xiàn)可調(diào)整表格(table)列寬的代碼,需要的朋友可以參考下2023-06-06
jQuery頁面圖片伴隨滾動(dòng)條逐漸顯示的小例子，需要的朋友可以參考一下2013-03-03
類選擇器想必很多喜歡jquery的朋友早早就涉及到了吧，它們的使用也應(yīng)該了如指掌了吧，接下來幫大家溫習(xí)下幾個(gè)簡單類選擇器的使用方法，感興趣的你可以參考下哈，希望對你有所幫助2013-03-03
這篇文章主要介紹了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
對于 xhr 對象來說，我們主要通過異步方式訪問服務(wù)器，在 onreadystatechange 事件中處理服務(wù)器回應(yīng)的內(nèi)容。簡單的 xhr 使用如下所示。2010-08-08
使用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)畫。該方法通過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