jQuery刪除/清空指定元素的所有子節(jié)點(diǎn)實(shí)例代碼

更新時(shí)間：2019年07月04日 10:34:20 作者：小時(shí)光

這篇文章主要給大家介紹了關(guān)于jQuery刪除/清空指定元素的所有子節(jié)點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

我們知道可以利有jQuery中的detach()方法和jQuery中的remove()方法刪除指定的或是匹配的元素，也可以使用removeClass()方法以及removeAttr()方法刪除指定或是匹配元素的類或是屬性。那么我們今天說(shuō)一說(shuō)利用jQuery如果刪除指定或匹配的元素內(nèi)的子元素和節(jié)點(diǎn)！

jQuery中empty()方法的解釋

jQuery中的empty()方法：些方法可以清空/刪除指定元素下的所以子節(jié)點(diǎn)或是內(nèi)容

語(yǔ)法：

$(selector).empty()

舉個(gè)大大的“例”字

利用jQuery中的empty()方法移去DIV中的所有內(nèi)容

HTML代碼

<div id="mochu">
  <p>這里是P標(biāo)簽內(nèi)容</p>
  <p>這里是第二個(gè)P標(biāo)簽的內(nèi)容</p>
</div>

JQ代碼

$('#button').click(function(){
  $("#mochu").empty();
})

結(jié)果圖示

審核源碼如下圖所示

通過(guò)上圖我們可以發(fā)現(xiàn)，ID為mochu的div標(biāo)簽，里面的P標(biāo)簽和內(nèi)容都已被刪除！

作者有話說(shuō)

寫這篇文章的時(shí)候，查閱了三個(gè)文檔，其中一個(gè)文檔這樣說(shuō)的，empty()函數(shù)應(yīng)理解為清空指定元素下的子節(jié)點(diǎn)，并不是刪除指定元素下的子節(jié)點(diǎn)。關(guān)于這一點(diǎn)，大家看著理解吧。我個(gè)人認(rèn)為，還是清空比較恰當(dāng)一些！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

詳解jQuery中基本的動(dòng)畫方法
通過(guò)jQuery中基本的動(dòng)畫方法，能夠輕松地為網(wǎng)頁(yè)添加非常精彩的視覺(jué)效果，給用戶一種全新的體驗(yàn)，本文主要對(duì)jQuery中基本的動(dòng)畫方法進(jìn)行詳細(xì)介紹，需要的朋友一起來(lái)看下吧
2016-12-12
jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁(yè)3D輪播圖封裝功能【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁(yè)3D輪播圖封裝功能,結(jié)合實(shí)例形式詳細(xì)分析了基于jQuery插件Figure_3D.js實(shí)現(xiàn)3D輪播圖功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
從零開始學(xué)習(xí)jQuery (二) 萬(wàn)能的選擇器
本章講解jQuery最重要的選擇器部分的知識(shí). 有了jQuery的選擇器我們幾乎可以獲取頁(yè)面上任意的一個(gè)或一組對(duì)象, 可以明顯減輕開發(fā)人員的工作量.
2010-10-10
jQuery Dialog 取消右上角刪除按鈕事件
這篇文章主要介紹了jQuery Dialog 取消右上角刪除按鈕事件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
jQuery.prototype.init選擇器構(gòu)造函數(shù)源碼思路分析
jQuery的核心思想可以簡(jiǎn)單概括為“查詢和操作dom”，今天主要是分析一下jQuery.prototype.init選擇器構(gòu)造函數(shù)，處理選擇器函數(shù)中的參數(shù),感興趣的朋友可以了解下，或許本文所提供的知識(shí)對(duì)你學(xué)習(xí)有所幫助
2013-02-02
jQuery中animate的幾種用法與注意事項(xiàng)
在今天之前，我對(duì)jQuery的中的animate()方法還停留在最常見(jiàn)的用法，查了一下手冊(cè)，發(fā)現(xiàn)在1.8的時(shí)候增加了幾個(gè)比較有用的回調(diào)函數(shù)，想著就來(lái)總結(jié)下jQuery中animate的幾種用法與注意事項(xiàng)，方便自己或者大家有需要的時(shí)候參考借鑒，下面來(lái)一起看看吧。
2016-12-12
JQuery調(diào)用綁定click事件的3種寫法
這篇文章主要介紹了JQuery調(diào)用綁定click事件的3種寫法,本文簡(jiǎn)潔清晰的給出3種寫法的代碼示例,可以很方便的復(fù)制使用,需要的朋友可以參考下
2015-03-03
jQuery插件HighCharts實(shí)現(xiàn)的2D對(duì)數(shù)餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D對(duì)數(shù)餅圖效果,結(jié)合實(shí)例形式分析了jQuery圖形插件HighCharts繪制2D對(duì)數(shù)餅圖的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
JQuery遍歷DOM節(jié)點(diǎn)的方法
這篇文章主要介紹了JQuery遍歷DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery遍歷DOM節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
使用jQuery實(shí)現(xiàn)一個(gè)類似GridView的編輯,更新,取消和刪除的功能
在項(xiàng)目中遇到這樣的需求當(dāng)用戶點(diǎn)擊編輯時(shí)，在點(diǎn)擊行下動(dòng)態(tài)產(chǎn)生一行，編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕，點(diǎn)擊“取消”銨鈕，刪除剛剛動(dòng)態(tài)產(chǎn)生的行，編輯銨鈕狀態(tài)恢復(fù)。下面小編給大家分享實(shí)例代碼，一起看看吧
2017-03-03