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ò)
$('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)然也可以通過(guò)向remove傳參的形式來(lái)過(guò)濾選擇結(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ǎ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');
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(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設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式
設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式,通過(guò)jquery來(lái)實(shí)現(xiàn),需要注意的是中間用逗號(hào)隔開(kāi),感興趣的朋友可以參考下2013-08-08jQuery模擬Marquee實(shí)現(xiàn)無(wú)縫滾動(dòng)效果完整實(shí)例
這篇文章主要介紹了jQuery模擬Marquee實(shí)現(xiàn)無(wú)縫滾動(dòng)效果,結(jié)合完整實(shí)例形式分析了jQuery針對(duì)圖片與文字的無(wú)縫滾動(dòng)效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-09-09jQuery中常用動(dòng)畫(huà)效果函數(shù)(日常整理)
這篇文章主要介紹了小編日常收集整理的關(guān)于jQuery中常用動(dòng)畫(huà)效果函數(shù)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)的簡(jiǎn)單折疊菜單(折疊面板)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單折疊菜單(折疊面板)效果代碼,涉及jQuery中slideToggle與toggleClass方法的靈活使用技巧,需要的朋友可以參考下2015-09-09jQuery插件echarts去掉垂直網(wǎng)格線用法示例
這篇文章主要介紹了jQuery插件echarts去掉垂直網(wǎng)格線用法,結(jié)合實(shí)例形式對(duì)比分析了jQuery圖標(biāo)插件echarts針對(duì)垂直網(wǎng)格線的相關(guān)設(shè)置操作技巧,需要的朋友可以參考下2017-03-03