DOM に基づいた空と削除の違いの詳細な例-jsチュートリアル-php.cn

DOM に基づいた空と削除の違いの詳細な例

小云云

リリース： 2017-12-29 09:44:15

オリジナル

1463 人が閲覧しました

この記事では主にDOMノードの削除に基づくemptyとremoveの違い（詳細説明）についての記事をお届けします。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ページ上のノードの削除は、開発者にとって一般的な操作です。jQuery には、この問題に対処するためのいくつかの異なるメソッドが用意されています。ここでは、empty メソッドと delete メソッドを詳しく見ていきます

名前が示すように、empty メソッドは異なります。 delete メソッドとは少し異なります。指定された要素内のすべての子ノードのみを削除します。

このメソッドは、子要素 (および他の子孫要素) を削除するだけでなく、要素内のテキストも削除します。説明によれば、要素内の任意のテキスト文字列は要素の子ノードとみなされます。以下の 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() を介してフィルタリングルールを渡すことで、

<!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 は 2 つのメソッドを提供します。 () と Remove([expr]) はどちらも Delete 要素ですが、この 2 つの間にはまだ違いがあります。

指定した要素を削除する必要がある場合、jQuery には 2 つのメソッド、empty() とremove([ expr])、どちらも要素を削除しますが、それでも違いがあります

emptyメソッド

厳密に言うと、empty()メソッドはノードを削除するのではなく、ノード内のすべての子孫ノードをクリアします。 element

empty は自身のノードを削除できません

remove メソッド

このノードとこのノードに含まれるすべての子孫ノードが同時に削除されます

指定されたコレクション内の要素を削除するフィルタリング式を提供します

上記は2 つの違いについては、以下のコード部分を通じて理解を深めていきます

<!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>

ログイン後にコピー