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

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

在結果集后鏈式調用remove()方法即可刪除也可以通過向remove傳參的形式來過濾選擇結果再執(zhí)行remove操作

刪除

刪除操作非常簡單，直接在結果集后鏈式調用remove()方法即可。

例如，要刪除以下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> 

當然也可以通過向remove傳參的形式來過濾選擇結果，然后再執(zhí)行remove操作。

復制代碼代碼如下:

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

需要注意的是

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

替換

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

復制代碼代碼如下:

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

您可能感興趣的文章:

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