DOM に基づいた空と削除の違いの詳細な例
この記事では主に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>関連する推奨事項:
php の関数 is_null、isset、empty の紹介
以上がDOM に基づいた空と削除の違いの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7677
15
1393
52
1207
24
91
11
PHPは、指定されたキーが配列内に存在するかどうかを判断します
Mar 21, 2024 pm 09:21 PM
この記事では、PHP が配列内に指定されたキーが存在するかどうかを判断する方法について詳しく説明します。編集者が非常に実用的であると考えたので、参考として共有します。この記事を読んで何かを得ることができれば幸いです。 PHP は、指定されたキーが配列内に存在するかどうかを判断します。 PHP では、指定されたキーが配列内に存在するかどうかを判断する方法が数多くあります。 1. isset() 関数を使用します: isset($array["key"]) この関数ブール値を返します。指定されたキーが存在する場合は true、存在しない場合は false。 2. array_key_exists() 関数を使用します: array_key_exists("key",$arr)
C# の StringBuilder.Remove 関数を使用して、文字列の指定された部分を削除します。
Nov 18, 2023 pm 01:28 PM
C# で StringBuilder.Remove 関数を使用して、文字列の指定された部分を削除します。C# では、StringBuilder クラスは文字列の変更と操作を可能にする変更可能な文字列型です。 StringBuilder の Remove 関数は、文字列の指定された部分を削除する便利な方法を提供します。 StringBuilder.Remove 関数の使用方法は次のとおりです。 publicStringBuilde
手段を削除する
Aug 04, 2023 am 11:29 AM
削除とは、データ構造から要素、ノード、文字を削除することを意味し、具体的な実装は使用するプログラミング言語とデータ構造によって異なります。配列、リンク リスト、文字列のいずれであっても、削除操作はプログラマがよく使用する操作の 1 つであり、データ処理とアルゴリズムの実装にとって非常に重要です。
Java の ArrayList.remove() 関数を使用して、指定されたインデックス位置にある要素を削除します
Jul 27, 2023 pm 12:51 PM
Java の ArrayList.remove() 関数を使用して、指定されたインデックス位置にある要素を削除します。Java コレクション フレームワークでは、ArrayList は要素を操作および管理するための便利なメソッドを多数提供する動的配列です。その中でも、remove() は ArrayList クラスの最もよく使用される関数の 1 つです。 Remove() 関数は、インデックス位置に基づいて ArrayList から要素を削除できます。 ArrayList.remov の使い方を見てみましょう
PHP 関数の紹介—empty(): 変数が空かどうかを確認する
Jul 25, 2023 am 10:23 AM
PHP 関数の紹介 -empty(): 変数が空かどうかを確認する PHP プログラミングでは、変数が空かどうかを判断する必要があることがよくあります。 PHP の組み込みの empty() 関数は、変数が空かどうかを確認するために使用されます。この記事では、empty() 関数の使用法を紹介し、いくつかの実用的なコード例を示します。 empty() 関数の使用法は非常に簡単で、1 つのパラメータを受け取り、ブール値を返します。パラメータの値が以下のいずれかの場合、empty()関数は
時系列に基づく異常検出問題
Oct 09, 2023 pm 04:33 PM
時系列に基づく異常検出の問題には、具体的なコード例が必要です 時系列データとは、株価、気温の変化、交通の流れなど、時間の経過とともに一定の順序で記録されたデータです。実際のアプリケーションでは、時系列データの異常検出は非常に重要です。外れ値は、通常のデータ、ノイズ、誤ったデータ、または特定の状況における予期せぬイベントと一致しない極端な値である可能性があります。異常検出は、これらの異常を発見し、適切な措置を講じるのに役立ちます。時系列異常検出問題の場合、一般的に使用される
Cでvectorのdelete関数を使用する方法
Feb 18, 2024 am 11:29 AM
C でのベクターの削除の使用には、特定のコード例が必要です。C 言語のベクターは、実行時にサイズを調整できる動的配列です。これは、複数のオブジェクトを保存および操作するために使用される、非常に一般的に使用されるデータ構造です。実際のアプリケーションでは、多くの場合、新しい要素をベクトルに挿入したり、既存の要素を削除したりする必要があります。この記事では、C 言語でのベクトル削除の使用法を詳しく紹介し、対応するコード例を示します。ベクトルの削除関数プロトタイプ: v
Javaは、ArrayListクラスのremove()関数を使用して、コレクションから要素を削除します。
Jul 24, 2023 pm 09:17 PM
Java は、ArrayList クラスの Remove() 関数を使用して、コレクション内の要素を削除します。ArrayList は、Java で一般的に使用されるコレクション クラスの 1 つであり、動的配列の実装を提供します。 ArrayList はさまざまなタイプの要素を保存でき、必要に応じていつでも追加および削除できます。 ArrayList では、コレクション内の特定の要素を削除する必要があることがよくあります。 Java では、この関数を実装するための Remove() 関数が提供されています。次に、 など詳しく紹介していきます。
