jQuery 刪除/替換DOM元素的幾種方式
更新時間:2014年05月20日 09:08:06 作者:
在結(jié)果集后鏈?zhǔn)秸{(diào)用remove()方法即可刪除也可以通過向remove傳參的形式來過濾選擇結(jié)果再執(zhí)行remove操作
刪除
刪除操作非常簡單,直接在結(jié)果集后鏈?zhǔn)秸{(diào)用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>
當(dāng)然也可以通過向remove傳參的形式來過濾選擇結(jié)果,然后再執(zhí)行remove操作。
$('a').remove('.remove');
需要注意的是
remove操作并不會把符合條件的元素從結(jié)果集中刪除,所以理論上可以繼續(xù)操作被"刪除"掉的元素
remove操作不但會“刪除”元素與所有元素相關(guān)的數(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');
刪除操作非常簡單,直接在結(jié)果集后鏈?zhǔn)秸{(diào)用remove()方法即可。
例如,要刪除以下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操作并不會把符合條件的元素從結(jié)果集中刪除,所以理論上可以繼續(xù)操作被"刪除"掉的元素
remove操作不但會“刪除”元素與所有元素相關(guān)的數(shù)據(jù)也會被刪除(event handlers、internally cached data)
替換
如果想要把class為remove的li元素替換為<li>removed</li>,可以使用以下兩種等價的方法
復(fù)制代碼 代碼如下:
$('li.remove').replaceWith('<li>removed</li>);
$('<li>removed</li>;).replaceAll('li.remove');
您可能感興趣的文章:
- jQuery實現(xiàn)長按按鈕觸發(fā)事件的方法
- JQuery自動觸發(fā)事件的方法
- JQuery文本改變觸發(fā)事件如聚焦事件、失焦事件
- jQuery如何使用自動觸發(fā)事件trigger
- jquery 查找select ,并觸發(fā)事件的實現(xiàn)代碼
- jquery實現(xiàn)回車鍵觸發(fā)事件(實例講解)
- jquery實現(xiàn)按Enter鍵觸發(fā)事件示例
- JQuery觸發(fā)事件例如click
- jquery實現(xiàn)輸入框?qū)崟r輸入觸發(fā)事件代碼
- jquery選擇器排除某個DOM元素的方法(實例演示)
- jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
相關(guān)文章
jQuery模擬Marquee實現(xiàn)無縫滾動效果完整實例
這篇文章主要介紹了jQuery模擬Marquee實現(xiàn)無縫滾動效果,結(jié)合完整實例形式分析了jQuery針對圖片與文字的無縫滾動效果實現(xiàn)技巧,需要的朋友可以參考下2016-09-09jQuery實現(xiàn)的簡單折疊菜單(折疊面板)效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的簡單折疊菜單(折疊面板)效果代碼,涉及jQuery中slideToggle與toggleClass方法的靈活使用技巧,需要的朋友可以參考下2015-09-09jQuery插件echarts去掉垂直網(wǎng)格線用法示例
這篇文章主要介紹了jQuery插件echarts去掉垂直網(wǎng)格線用法,結(jié)合實例形式對比分析了jQuery圖標(biāo)插件echarts針對垂直網(wǎng)格線的相關(guān)設(shè)置操作技巧,需要的朋友可以參考下2017-03-03