首頁 >web前端 >js教程 >實例詳解基於DOM之empty和remove的區別

實例詳解基於DOM之empty和remove的區別

小云云原創: 2017-12-29 09:44:151435瀏覽

本文主要為大家帶來一篇基於DOM節點刪除之empty和remove的差異(詳解)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

要移除頁面上節點是開發者常見的操作，jQuery提供了幾種不同的方法用來處理這個問題，這裡我們開仔細了解下empty和remove方法

##empty顧名思義，清空方法，但是與刪除又有點不一樣，因為它只移除了指定元素中的所有子節點。

這個方法不只移除子元素（和其他後代元素），同樣移除元素裡的文字。因為，根據說明，元素裡任何文字字串都被看做是該元素的子節點。請看下面的HTML：

<p class="hello"><p>这是p标签</p></p>

如果我們透過empty方法移除裡面p的所有元素，它只是清空內部的html程式碼，但是標記仍然留在DOM中

//通过empty处理
$('.hello').empty()

//结果：<p>这是p标签</p>被移除
<p class="hello"></p>

透過empty移除了目前p元素下的所有p元素，但是本身id=test的p元素沒有被刪除

<!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>
  p {
    background: #bbffaa;
    width: 300px;
  }
  </style>
</head>

<body>
  <h2>通过empty移除元素</h2>
  <p id="test">
    <p>p元素1</p>
    <p>p元素2</p>
  </p>
  <button>点击通过jQuery的empty移除元素</button>
  <script type="text/javascript">
  $("button").on('click', function() {
    //通过empty移除了当前p元素下的所有p元素
    //但是本身id=test的p元素没有被删除
    $("#test").empty()
  })
  </script>
</body>

</html>

remove與empty一樣，都是移除元素的方法，但是remove會將元素本身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery資料。

例如一段節點，綁定點擊事件

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

如果不透過remove方法刪除這個節點其實也很簡單，但是同時需要把事件給銷毀掉，這裡是為了防止"記憶體洩漏"，所以前端開發者一定要注意，綁了多少事件，不用的時候一定要記得銷毀

透過remove方法移除p及其內部所有元素，remove內部會自動操作事件銷毀方法，所以使用使用起來非常簡單

//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁

remove表達式參數：

remove比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點

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

<!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>通过jQuery remove方法移除元素</h2>
  <p class="test1">
    <p>p元素1</p>
    <p>p元素2</p>
  </p>
  <p class="test2">
    <p>p元素3</p>
    <p>p元素4</p>
  </p>
  <button>通过点击jQuery的empty移除元素</button>
  <button>通过点击jQuery的empty移除指定元素</button>
  <script type="text/javascript">
  $("button:first").on('click', function() {
    //删除整个 class=test1的p节点
    $(".test1").remove()
  })

  $("button:last").on('click', function() {
    //找到所有p元素中，包含了3的元素
    //这个也是一个过滤器的处理
    $("p").remove(":contains('3')")
  })
  </script>
</body>

</html>

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

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

empty方法

##嚴格地講，empty()方法不是刪除節點，而是清空節點，它能清空元素中的所有後代節點

#empty不能刪除自己這個節點

remove方法

該節點與該節點所包含的所有後代節點將同時被刪除

提供傳遞一個篩選的表達式，刪除指定合集中的元素

以上就是二者的區別，我們具體透過下邊程式碼部分加深理解

<!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 p,
  .right p {
    width: 100px;
    height: 90px;
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px solid #ccc;
  }
  
  .left p {
    background: #bbffaa;
  }
  
  .right p {
    background: yellow;
  }
  </style>
</head>

<body>
  <h2>通过empty与remove移除元素</h2>
  <p class="left">
    <button id="bt1">点击通过jQuery的empty移除内部P元素</button>
    <button id="bt2">点击通过jQuery的remove移除整个节点</button>
  </p>
  <p class="right">
    <p id="test1">
      <p>p元素1</p>
      <p>p元素2</p>
    </p>
    <p id="test2">
      <p>p元素3</p>
      <p>p元素4</p>
    </p>
  </p>
  <script type="text/javascript">
  $("#bt1").on('click', function() {
    //删除了2个p元素，但是本着没有删除 
    $("#test1").empty()
  })

  $("#bt2").on('click', function() {
    //删除整个节点
    $("#test2").remove()
  })
  </script>
</body>

</html>

實例詳解基於DOM之empty和remove的區別

相關文章