快捷導(dǎo)航

jQuery中DOM節(jié)點(diǎn)刪除之empty與remove

更新時(shí)間：2017年01月20日 11:41:37 投稿：daisy

DOM節(jié)點(diǎn)刪除相信對(duì)每個(gè)初學(xué)jQuery的新手們來(lái)說(shuō)都不陌生，下面這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)刪除之empty與remove的相關(guān)資料，有需要的朋友可以參考借鑒，感興趣的下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

最近剛學(xué)了新知識(shí)，雖然是一個(gè)小知識(shí)點(diǎn)，但還是忍不住想和大家分享。本文的內(nèi)容主要針對(duì)的是初學(xué)者，如果大家有什么意見或者問(wèn)題都可以留言交流的，下面來(lái)看看詳細(xì)的介紹吧。

.empty()是指對(duì)該節(jié)點(diǎn)后代的刪除，結(jié)果是清空該節(jié)點(diǎn)（該節(jié)點(diǎn)里面已無(wú)元素）。

.remove()是指刪除該節(jié)點(diǎn)，結(jié)果是刪除該節(jié)點(diǎn)(該節(jié)點(diǎn)及其后代元素都將不存在)。

下面放代碼來(lái)說(shuō)明。

<!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">通過(guò)empty刪除節(jié)點(diǎn)</button>
  <button class="bt2">通過(guò)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)以下畫面。