jQuery中DOM節(jié)點刪除之empty與remove
更新時間：2017年01月20日 11:41:37 投稿：daisy
DOM節(jié)點刪除相信對每個初學(xué)jQuery的新手們來說都不陌生，下面這篇文章主要介紹了jQuery中DOM節(jié)點刪除之empty與remove的相關(guān)資料，有需要的朋友可以參考借鑒，感興趣的下面來一起學(xué)習(xí)學(xué)習(xí)吧。
前言
最近剛學(xué)了新知識，雖然是一個小知識點，但還是忍不住想和大家分享。本文的內(nèi)容主要針對的是初學(xué)者，如果大家有什么意見或者問題都可以留言交流的，下面來看看詳細(xì)的介紹吧。
.empty()是指對該節(jié)點后代的刪除，結(jié)果是清空該節(jié)點（該節(jié)點里面已無元素）。
.remove()是指刪除該節(jié)點，結(jié)果是刪除該節(jié)點(該節(jié)點及其后代元素都將不存在)。
下面放代碼來說明。
<!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é)點</button>
<button class="bt2">通過remove刪除節(jié)點</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>
點擊運行后，出現(xiàn)以下畫面。
點擊button1,將執(zhí)行.empty()指令，預(yù)期將刪除test1子節(jié)點元素。結(jié)果如下。
再點擊button2,將執(zhí)行.remove()指令。預(yù)期將刪除test2及其后代子節(jié)點元素。結(jié)果如下。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
jQuery圖片預(yù)加載 等比縮放實現(xiàn)代碼
jQuery圖片預(yù)加載 等比縮放實現(xiàn)代碼，需要的朋友可以參考下。2011-10-10
jQuery實現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼分享
這篇文章主要介紹了類似淘寶網(wǎng)站搜索框樣式實現(xiàn)代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
當(dāng)用戶需要某項功能時要填寫一些表單信息，在填寫完成并提交后，該部分信息是不允許再次修改的。表單包含TextBox、DropDownList、CheckBox等控件。2010-04-04
這篇文章主要介紹了jQuery實現(xiàn)的經(jīng)典滑動門效果,涉及jQuery基于鼠標(biāo)事件實現(xiàn)頁面元素的遍歷與樣式動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jquery中$.ajax方法提交表單的方法及介紹，希望對大家有所幫助2014-11-11
jQuery中的pushStack實現(xiàn)原理和應(yīng)用實例
這篇文章主要介紹了jQuery中的pushStack實現(xiàn)原理和應(yīng)用實例,pushStack是jQuery內(nèi)核中一個非常重要的函數(shù),許多jQuery內(nèi)部函數(shù)中都頻繁用到它,掌握這個函數(shù),有利于理解jQuery的運行原理,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery下拉框的簡單應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
jQuery實現(xiàn)默認(rèn)是閉合的FAQ展開效果菜單
這篇文章主要介紹了jQuery實現(xiàn)默認(rèn)是閉合的FAQ展開效果菜單,涉及jQuery中slideUp及slideDown用法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
也就是說如果這個圖片沒有加載成功了會怎么辦，下面為大大家分享下如何處理裂圖，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
基于jquery的設(shè)置頁面文本框 只能輸入數(shù)字的實現(xiàn)代碼
之前寫過的方法有缺陷，可以輸入空格。現(xiàn)在將空格也屏蔽了。就是在之前的代碼里加入了過濾空格的功能。2011-04-04