ホームページ > 記事 > ウェブフロントエンド > DOMノード削除におけるemptyとremoveの違い
DOMノード削除におけるemptyとremoveの違い
- 一个新手オリジナル
- 2017-09-29 10:04:011966ブラウズ
ページ上のノードの削除は、開発者にとって一般的な操作です。jQuery には、この問題に対処するためのさまざまなメソッドが用意されています。ここでは、empty メソッドと delete メソッドを詳しく見ていきます
その名前が示すように、empty メソッドは とは異なります。削除では、指定された要素内のすべての子ノードのみが削除されるため、少し異なります。
このメソッドは、子要素 (および他の子孫要素) を削除するだけでなく、要素内のテキストも削除します。指示によれば、要素内のテキスト文字列は要素の子ノードとみなされます。以下の HTML を見てください:
<p class="hello"><p>这是p标签</p></p>
空のメソッドで 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 の利点は、削除する一致する要素のセットをフィルタリングするセレクター式を渡すことができることです。指定したノードを選択的に削除できます
$() を渡して同じ要素のグループを選択し、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] ) の 2 つのメソッドが提供され、どちらも要素を削除しますが、この 2 つのメソッドにはまだ違いがあります:
指定された要素を削除する必要がある場合、jQuery は 2 つのメソッド、empty() とRemove([expr])、両方 どちらも要素を削除しますが、2 つの違いはまだあります
empty メソッド
厳密に言えば、empty() メソッドはノードを削除しませんが、ノードをクリアできます。要素内のすべての子孫ノード
空の場合は、自身のノードを削除できません
removeメソッド
このノードと、このノードに含まれるすべての子孫ノードは同時に削除されます
指定されたコレクション内の要素を削除するフィルタリング式
上記が2つの違いです。右側のコード部分を通して理解を深めましょう
以上がDOMノード削除におけるemptyとremoveの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。