實例詳解基於DOM之empty和remove的區別-js教程-PHP中文網

首頁

web前端

js教程

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

小云云

Dec 29, 2017 am 09:44 AM

empty remove 基於

本文主要為大家帶來一篇基於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>

登入後複製

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7802

Java教學

1645

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

PHP判斷某個數組中是否存在指定的key Mar 21, 2024 pm 09:21 PM

這篇文章將為大家詳細講解有關PHP判斷某個數組中是否存在指定的key，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章後可以有所收穫。 PHP判斷某個陣列中是否存在指定的key：在php中，判斷某個陣列中是否存在指定的key的方法有多種：1.使用isset()函數：isset($array["key"])此函數傳回布林值，如果指定的key存在，則傳回true，否則傳回false。 2.使用array_key_exists()函數：array_key_exists("key",$arr

remove是什麼意思 Aug 04, 2023 am 11:29 AM

remove是從資料結構中刪除一個元素、節點或字元的意思，具體的實作方式取決於所使用的程式語言和資料結構。無論是陣列、鍊錶或字串，remove操作都是程式設計師經常使用的操作之一，對於資料處理和演算法實作都非常重要。

使用C#中的StringBuilder.Remove函數刪除字串中的指定部分 Nov 18, 2023 pm 01:28 PM

使用C#中的StringBuilder.Remove函數刪除字串中的指定部分在C#中，StringBuilder類別是一個可變的字串類型，它允許我們進行字串的修改和操作。而StringBuilder的Remove函數則提供了一種方便的方式來刪除字串中的指定部分。 StringBuilder.Remove函數的用法如下：publicStringBuilde

使用java的ArrayList.remove()函數移除指定索引位置的元素 Jul 27, 2023 pm 12:51 PM

使用Java的ArrayList.remove()函數移除指定索引位置的元素在Java集合框架中，ArrayList是一個動態數組，它提供了許多方便的方法來操作和管理元素。其中，remove()是ArrayList類別的一個很常用的函數之一。 remove()函數可以根據索引位置來移除ArrayList中的元素。下面我們就來看看使用ArrayList.remov

PHP函數介紹—empty(): 檢查變數是否為空 Jul 25, 2023 am 10:23 AM

PHP函數介紹—empty():檢查變數是否為空在PHP程式設計中，常需要對變數進行判斷，判斷變數是否為空是常見的需求。而PHP內建的empty()函數就是用來檢查變數是否為空的。本文將介紹empty()函數的用法以及提供一些實際的程式碼範例。 empty()函數的用法非常簡單，它接受一個參數，並且傳回一個布林值。當參數的值為下列情況之一時，empty()函數

基於時間序列的異常檢測問題 Oct 09, 2023 pm 04:33 PM

基於時間序列的異常檢測問題，需要具體代碼範例時間序列數據是在時間上按照一定的順序記錄的數據，例如股票價格、氣溫變化、交通流量等。在實際應用中，對於時間序列資料的異常檢測具有重要的意義。異常值可以是與正常數據不一致的極端值、雜訊、錯誤數據，或是某種特定情況下的突發事件。異常檢測能夠幫助我們發現這些異常情況，從而採取相應的措施。針對時間序列的異常檢測問題，常用

如何在C中使用vector的刪除功能 Feb 18, 2024 am 11:29 AM

C中vector的remove用法，需要具體程式碼範例介紹：C語言中的vector是一種動態數組，其大小可以在運行時進行調整。它是一種非常常用的資料結構，用於儲存和操作多個物件。在實際應用中，我們經常需要在vector中插入新元素或刪除已有元素。本文將詳細介紹C語言中vector的remove用法，並給出對應的程式碼範例。 vector的remove函數原型：v

Java使用ArrayList類別的remove()函數刪除集合中的元素 Jul 24, 2023 pm 09:17 PM

Java使用ArrayList類別的remove()函數來刪除集合中的元素ArrayList是Java中常用的集合類別之一，它提供了一個動態陣列的實作。 ArrayList可以儲存不同類型的元素，並且可以隨時根據需要進行增加和刪除操作。在ArrayList中，我們常常需要刪除集合中的特定元素。 Java提供了remove()函數來實現這項功能。接下來，我們將詳細介紹如

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題