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

發(fā)布時(shí)間：2020-09-18 13:46:04 來(lái)源：腳本之家閱讀：171 作者：daisy 欄目：web開發(fā)

前言

最近剛學(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)以下畫面。

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

點(diǎn)擊button1,將執(zhí)行.empty()指令，預(yù)期將刪除test1子節(jié)點(diǎn)元素。結(jié)果如下。

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

再點(diǎn)擊button2,將執(zhí)行.remove()指令。預(yù)期將刪除test2及其后代子節(jié)點(diǎn)元素。結(jié)果如下。

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽