快捷導(dǎo)航

基于DOM節(jié)點(diǎn)刪除之empty和remove的區(qū)別(詳解)

更新時(shí)間：2017年09月11日 08:25:02 作者：小周sri的碼農(nóng)

下面小編就為大家?guī)?lái)一篇基于DOM節(jié)點(diǎn)刪除之empty和remove的區(qū)別(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

要移除頁(yè)面上節(jié)點(diǎn)是開(kāi)發(fā)者常見(jiàn)的操作，jQuery提供了幾種不同的方法用來(lái)處理這個(gè)問(wèn)題，這里我們開(kāi)仔細(xì)了解下empty和remove方法

empty 顧名思義，清空方法，但是與刪除又有點(diǎn)不一樣，因?yàn)樗灰瞥?指定元素中的所有子節(jié)點(diǎn)。

這個(gè)方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因?yàn)?，根?jù)說(shuō)明，元素里任何文本字符串都被看做是該元素的子節(jié)點(diǎn)。請(qǐng)看下面的HTML：

<div class="hello"><p>這是p標(biāo)簽</p></div>

如果我們通過(guò)empty方法移除里面div的所有元素，它只是清空內(nèi)部的html代碼，但是標(biāo)記仍然留在DOM中

//通過(guò)empty處理
$('.hello').empty()

//結(jié)果：<p>這是p標(biāo)簽</p>被移除
<div class="hello"></div>

通過(guò)empty移除了當(dāng)前div元素下的所有p元素，但是本身id=test的div元素沒(méi)有被刪除

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <style>
  div {
    background: #bbffaa;
    width: 300px;
  }
  </style>
</head>

<body>
  <h2>通過(guò)empty移除元素</h2>
  <div id="test">
    <p>p元素1</p>
    <p>p元素2</p>
  </div>
  <button>點(diǎn)擊通過(guò)jQuery的empty移除元素</button>
  <script type="text/javascript">
  $("button").on('click', function() {
    //通過(guò)empty移除了當(dāng)前div元素下的所有p元素
    //但是本身id=test的div元素沒(méi)有被刪除
    $("#test").empty()
  })
  </script>
</body>

</html>

remove與empty一樣，都是移除元素的方法，但是remove會(huì)將元素自身移除，同時(shí)也會(huì)移除元素內(nèi)部的一切，包括綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)。

例如一段節(jié)點(diǎn)，綁定點(diǎn)擊事件

<div class="hello"><p>這是P段落</p></div>
$('.hello').on("click",fn)

如果不通過(guò)remove方法刪除這個(gè)節(jié)點(diǎn)其實(shí)也很簡(jiǎn)單，但是同時(shí)需要把事件給銷(xiāo)毀掉，這里是為了防止"內(nèi)存泄漏"，所以前端開(kāi)發(fā)者一定要注意，綁了多少事件，不用的時(shí)候一定要記得銷(xiāo)毀

通過(guò)remove方法移除div及其內(nèi)部所有元素，remove內(nèi)部會(huì)自動(dòng)操作事件銷(xiāo)毀方法，所以使用使用起來(lái)非常簡(jiǎn)單

//通過(guò)remove處理
$('.hello').remove()
//結(jié)果：<div class="hello"><p>這是P段落</p></div> 全部被移除 //節(jié)點(diǎn)不存在了,同事事件也會(huì)被銷(xiāo)毀

remove表達(dá)式參數(shù)：

remove比empty好用的地方就是可以傳遞一個(gè)選擇器表達(dá)式用來(lái)過(guò)濾將被移除的匹配元素集合，可以選擇性的刪除指定的節(jié)點(diǎn)

我們可以通過(guò)$()選擇一組相同的元素，然后通過(guò)remove（）傳遞篩選的規(guī)則，從而這樣處理

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <style>
  .test1 {
    background: #bbffaa;
  }
  
  .test2 {
    background: yellow;
  }
  </style>
</head>

<body>
  <h2>通過(guò)jQuery remove方法移除元素</h2>
  <div class="test1">
    <p>p元素1</p>
    <p>p元素2</p>
  </div>
  <div class="test2">
    <p>p元素3</p>
    <p>p元素4</p>
  </div>
  <button>通過(guò)點(diǎn)擊jQuery的empty移除元素</button>
  <button>通過(guò)點(diǎn)擊jQuery的empty移除指定元素</button>
  <script type="text/javascript">
  $("button:first").on('click', function() {
    //刪除整個(gè) class=test1的div節(jié)點(diǎn)
    $(".test1").remove()
  })

  $("button:last").on('click', function() {
    //找到所有p元素中，包含了3的元素
    //這個(gè)也是一個(gè)過(guò)濾器的處理
    $("p").remove(":contains('3')")
  })
  </script>
</body>

</html>

要用到移除指定元素的時(shí)候，jQuery提供了empty()與remove([expr])二個(gè)方法，兩個(gè)都是刪除元素，但是兩者還是有區(qū)別：

要用到移除指定元素的時(shí)候，jQuery提供了empty()與remove([expr])二個(gè)方法，兩個(gè)都是刪除元素，但是兩者還是有區(qū)別

empty方法

嚴(yán)格地講，empty()方法并不是刪除節(jié)點(diǎn)，而是清空節(jié)點(diǎn)，它能清空元素中的所有后代節(jié)點(diǎn)

empty不能刪除自己本身這個(gè)節(jié)點(diǎn)

remove方法

該節(jié)點(diǎn)與該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除

提供傳遞一個(gè)篩選的表達(dá)式，刪除指定合集中的元素

以上就是二者的區(qū)別，我們具體通過(guò)下邊代碼部分加深理解

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <style>
  .left,
  .right {
    width: 300px;
  }
  
  .left div,
  .right div {
    width: 100px;
    height: 90px;
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px solid #ccc;
  }
  
  .left div {
    background: #bbffaa;
  }
  
  .right div {
    background: yellow;
  }
  </style>
</head>

<body>
  <h2>通過(guò)empty與remove移除元素</h2>
  <div class="left">
    <button id="bt1">點(diǎn)擊通過(guò)jQuery的empty移除內(nèi)部P元素</button>
    <button id="bt2">點(diǎn)擊通過(guò)jQuery的remove移除整個(gè)節(jié)點(diǎn)</button>
  </div>
  <div class="right">
    <div id="test1">
      <p>p元素1</p>
      <p>p元素2</p>
    </div>
    <div id="test2">
      <p>p元素3</p>
      <p>p元素4</p>
    </div>
  </div>
  <script type="text/javascript">
  $("#bt1").on('click', function() {
    //刪除了2個(gè)p元素，但是本著沒(méi)有刪除 
    $("#test1").empty()
  })

  $("#bt2").on('click', function() {
    //刪除整個(gè)節(jié)點(diǎn)
    $("#test2").remove()
  })
  </script>
</body>

</html>

以上這篇基于DOM節(jié)點(diǎn)刪除之empty和remove的區(qū)別(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: