jQuery中DOM節(jié)點(diǎn)刪除之empty與remove
前言
最近剛學(xué)了新知識(shí)，雖然是一個(gè)小知識(shí)點(diǎn)，但還是忍不住想和大家分享。本文的內(nèi)容主要針對(duì)的是初學(xué)者，如果大家有什么意見或者問題都可以留言交流的，下面來看看詳細(xì)的介紹吧。
.empty()是指對(duì)該節(jié)點(diǎn)后代的刪除，結(jié)果是清空該節(jié)點(diǎn)（該節(jié)點(diǎn)里面已無元素）。
.remove()是指刪除該節(jié)點(diǎn)，結(jié)果是刪除該節(jié)點(diǎn)(該節(jié)點(diǎn)及其后代元素都將不存在)。
下面放代碼來說明。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js "></script>
<style>
body{
background: #ffe5aa;
}
#test1{
width:100px;
height:100px;
background: #3db7ff;
}
#test2{
width:100px;
height:100px;
background: #ff179f;
}
</style>
</head>
<body>
<div class="whole">
<button class="bt1">通過empty刪除節(jié)點(diǎn)</button>
<button class="bt2">通過remove刪除節(jié)點(diǎn)</button>
</div>
<div id="test1">
<p>元素1</p>
<p>元素2</p>
</div>
<div id="test2">
<p>元素3</p>
<p>元素4</p>
</div>
<script type="text/javascript">
$(".bt1").on('click',function(){
$("#test1").empty();
})
$(".bt2").on('click',function(){
$("#test2").remove();
})
</script>
</body>
</html>
點(diǎn)擊運(yùn)行后，出現(xiàn)以下畫面。
點(diǎn)擊button1,將執(zhí)行.empty()指令，預(yù)期將刪除test1子節(jié)點(diǎn)元素。結(jié)果如下。
再點(diǎn)擊button2,將執(zhí)行.remove()指令。預(yù)期將刪除test2及其后代子節(jié)點(diǎn)元素。結(jié)果如下。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼
jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-10-10
jQuery實(shí)現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼分享
這篇文章主要介紹了類似淘寶網(wǎng)站搜索框樣式實(shí)現(xiàn)代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
基于jquery的讓頁面控件不可用的實(shí)現(xiàn)代碼
當(dāng)用戶需要某項(xiàng)功能時(shí)要填寫一些表單信息，在填寫完成并提交后，該部分信息是不允許再次修改的。表單包含TextBox、DropDownList、CheckBox等控件。2010-04-04
jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門效果,涉及jQuery基于鼠標(biāo)事件實(shí)現(xiàn)頁面元素的遍歷與樣式動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jquery中$.ajax方法提交表單的方法及介紹，希望對(duì)大家有所幫助2014-11-11
jQuery中的pushStack實(shí)現(xiàn)原理和應(yīng)用實(shí)例
這篇文章主要介紹了jQuery中的pushStack實(shí)現(xiàn)原理和應(yīng)用實(shí)例,pushStack是jQuery內(nèi)核中一個(gè)非常重要的函數(shù),許多jQuery內(nèi)部函數(shù)中都頻繁用到它,掌握這個(gè)函數(shù),有利于理解jQuery的運(yùn)行原理,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery下拉框的簡單應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
jQuery實(shí)現(xiàn)默認(rèn)是閉合的FAQ展開效果菜單
這篇文章主要介紹了jQuery實(shí)現(xiàn)默認(rèn)是閉合的FAQ展開效果菜單,涉及jQuery中slideUp及slideDown用法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
如何使用jQuery來處理圖片壞鏈具體實(shí)現(xiàn)步驟
也就是說如果這個(gè)圖片沒有加載成功了會(huì)怎么辦，下面為大大家分享下如何處理裂圖，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-05
基于jquery的設(shè)置頁面文本框 只能輸入數(shù)字的實(shí)現(xiàn)代碼
之前寫過的方法有缺陷，可以輸入空格?，F(xiàn)在將空格也屏蔽了。就是在之前的代碼里加入了過濾空格的功能。2011-04-04