ホームページ ウェブフロントエンド jsチュートリアル DOMノード削除におけるemptyとremoveの違い

DOMノード削除におけるemptyとremoveの違い

Sep 29, 2017 am 10:04 AM
empty remove 違い

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

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

このメソッドは、子要素 (および他の子孫要素) を削除するだけでなく、要素内のテキストも削除します。指示によれば、要素内のテキスト文字列は要素の子ノードとみなされます。以下の HTML を見てください:


<p class="hello"><p>这是p标签</p></p>
ログイン後にコピー

空のメソッドで p 内のすべての要素を削除すると、内部の HTML コードがクリアされるだけですが、マークアップは DOM に残ります


//通过empty处理
$(&#39;.hello&#39;).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(&#39;click&#39;, function() {        //通过empty移除了当前p元素下的所有p元素
        //但是本身id=test的p元素没有被删除        $("#test").empty()
    })    </script></body></html>
ログイン後にコピー

Remove は empty と同様に要素を削除するメソッドですが、remove は要素自体と要素内のすべてのもの (バインドされたイベントや要素に関連する jQuery データを含む) を削除します。

たとえば、ノードはクリック イベントにバインドされています


<p class="hello"><p>这是P段落</p></p>$(&#39;.hello&#39;).on("click",fn)
ログイン後にコピー

実際には、remove メソッドを使用せずにこのノードを削除するのは非常に簡単ですが、同時にイベントを破棄する必要があります。 「メモリ リーク」があるため、フロントエンド開発の読者は、関連付けられているイベントの数に注意し、使用していないときはイベントを破棄することを忘れないでください

remove メソッドを使用して p とそのすべての内部要素を削除します。イベントの破棄メソッドは自動的に実行されます。 Remove 内で操作されるため、使い方は非常に簡単です


//通过remove处理
$(&#39;.hello&#39;).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(&#39;click&#39;, function() {        //删除整个 class=test1的p节点        $(".test1").remove()
    })

    $("button:last").on(&#39;click&#39;, function() {        //找到所有p元素中,包含了3的元素
        //这个也是一个过滤器的处理        $("p").remove(":contains(&#39;3&#39;)")
    })    </script></body></html>
ログイン後にコピー

指定した要素を削除したい場合は、jQuery empty() と Remove([expr] ) の 2 つのメソッドが提供され、どちらも要素を削除しますが、この 2 つのメソッドにはまだ違いがあります:

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

empty メソッド

  • 厳密に言えば、empty() メソッドはノードを削除しませんが、ノードをクリアできます。要素内のすべての子孫ノード

  • 空の場合は、自身のノードを削除できません

removeメソッド

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

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

上記が2つの違いです。右側のコード部分を通して理解を深めましょう


以上がDOMノード削除におけるemptyとremoveの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nexo Exchangeは安全ですか? Nexo Exchangeは安全ですか? Mar 05, 2025 pm 07:39 PM

Nexo:それは暗号通貨交換であるだけでなく、デジタルファイナンシャルマネージャーでもあります。これにより、ユーザーは担保として暗号通貨でローンを取得することができ、関心を得るためのサービスを提供します。 Nexoは暗号通貨の購入、販売、償還機能も提供していますが、その中心的なビジネスは暗号融資です。この記事では、投資家により包括的な理解を提供するために、Nexoの運用モデルとセキュリティを詳細に調査します。 Nexoのオペレーティングモデルは2018年に設立され、スイスのZugに本社を置き、デジタルファイナンスの分野の先駆者です。これは、他の集中交換とは異なり、包括的な金融サービスの提供に重点を置いています。ユーザーは、資産を販売せずに暗号通貨を売買、取引することができます

韓国のビットコインと国内のビットコインに違いはありますか? 韓国のビットコインと国内のビットコインに違いはありますか? Mar 05, 2025 pm 06:51 PM

ビットコインの投資ブームは、世界初の分散型デジタル資産であるため、増加し続けています。中国はかつてビットコインの最大の市場でしたが、政策の影響は取引制限につながりました。今日、韓国は世界の主要なビットコイン市場の1つになっており、投資家はITとその国内ビットコインの違いに疑問を投げかけています。この記事では、両国のビットコイン市場間の違いに関する詳細な分析を行います。韓国と中国のビットコイン市場の違いの分析。たとえば、2024年10月下旬、韓国のビットコインの価格はかつてでした

エーテルとビットコインの違いは、エーテルとビットコインの違いは何ですか エーテルとビットコインの違いは、エーテルとビットコインの違いは何ですか Mar 19, 2025 pm 04:54 PM

イーサリアムとビットコインの違いは重要です。技術的には、BitcoinはPowを使用し、EtherはPowからPOSに移行しました。ビットコインの取引速度は遅く、イーサリアムは高速です。アプリケーションシナリオでは、Bitcoinは支払いストレージに焦点を当て、EtherはスマートコントラクトとDAPPをサポートしています。発行に関しては、ビットコインの総量は2100万人であり、エーテルコインの総額は固定されていません。各セキュリティチャレンジが利用可能です。市場価値に関しては、ビットコインが最初にランク付けされ、両方の価格の変動は大きいですが、特性が異なるため、イーサリアムの価格動向はユニークです。

ビットコインの憶測は株式投機ですか?なぜ? 2つの違いは何ですか? ビットコインの憶測は株式投機ですか?なぜ? 2つの違いは何ですか? Mar 05, 2025 pm 02:24 PM

ビットコイン:デジタルゴールドまたはストック取引デリバティブ?新たな投資方法としてのビットコインの性質の詳細な分析。この記事では、定義、自然、発行メカニズムなどの側面から詳細について説明し、ビットコイン投資の謎を明らかにします。ビットコインと株式:ビットコインと株式の本質的な違いは、ビットコインへの投資は株式への投資と同じではありません。ビットコインは、デジタル資産または仮想資産のカテゴリに属する​​分散型デジタル通貨です。この概念は、2009年に中本atによって提案されました。従来の通貨とは異なり、

マルチスレッドと非同期C#の違い マルチスレッドと非同期C#の違い Apr 03, 2025 pm 02:57 PM

マルチスレッドと非同期の違いは、マルチスレッドが複数のスレッドを同時に実行し、現在のスレッドをブロックせずに非同期に操作を実行することです。マルチスレッドは計算集約型タスクに使用されますが、非同期はユーザーインタラクションに使用されます。マルチスレッドの利点は、コンピューティングのパフォーマンスを改善することですが、非同期の利点はUIスレッドをブロックしないことです。マルチスレッドまたは非同期を選択することは、タスクの性質に依存します。計算集約型タスクマルチスレッド、外部リソースと相互作用し、UIの応答性を非同期に使用する必要があるタスクを使用します。

Bean BreadとDeepseekの違いは何ですか Bean BreadとDeepseekの違いは何ですか Mar 12, 2025 pm 01:24 PM

Bean BunとDeepseekのコアの違いは、検索の精度と複雑さです。 1. Doubaoは、シンプルで直接的なキーワードのマッチングに基づいていますが、低コストですが、精度が低く、構造化されたデータにのみ適しています。深い学習に基づいています。最終的な選択は、アプリケーションのシナリオとリソースの制限に依存します。

暗号投資のメンタリティは非常に重要です!不必要な心配を避け、正しい決定を下す方法は? 暗号投資のメンタリティは非常に重要です!不必要な心配を避け、正しい決定を下す方法は? Mar 05, 2025 pm 07:24 PM

暗号投資の恐怖、不確実性、疑い:情報に基づいた意思決定を行う方法は?多くの暗号投資家は、「これは最後のサイクル」に対する恐怖と、強気市場の期間に関する懸念に直面しており、他の人からの圧力と相まって、それが一緒になって投資の決定につながります。この記事では、これらの課題を克服し、より賢い投資の選択をする方法を模索します。潜在的なリスク:気晴らし:盲目的にホットスポットを追いかけ、コア資産の価値を無視します。悲観主義とためらい:不確実性は、自信の欠如、長い間保持できないこと、さらには市場から退場することにつながります。信念の欠如:プロジェクトに関する詳細な研究の欠如であり、市場のボラティリティに対処できません。利益作成戦略の欠如:プルバックの恐怖、潜在的なリターンの欠落のために、ポジションを早期にクリアする。対処戦略:1。コア領域に焦点を当てる:

お金を稼ぐ可能性が高いために通貨契約を運営する方法は?いくつかのヒントがあります お金を稼ぐ可能性が高いために通貨契約を運営する方法は?いくつかのヒントがあります Mar 05, 2025 pm 01:48 PM

通貨契約:リスクが高く、利益の確率を高める方法を備えた両刃の剣?通貨サークルの多くの退役軍人は、契約取引の大きな可能性に惹かれてきました。これは、寛大なリターンをもたらすだけでなく、大きな損失につながることができます。契約取引は本質的にデジタル通貨の派生物であり、そのリスクが高いと高いリターンが多くの注目を集めています。それでは、通貨サークル契約取引の利益の確率を高める方法は?これには、いくつかの重要なスキルが必要です。この記事では、リスクを減らし、収益性を向上させる方法を詳細に説明します。通貨サークルの契約利益戦略:不安定な暗号通貨市場では、契約取引で安定した利益を達成したい場合は、包括的な戦略を策定し、それを厳密に実装する必要があります。潜在的な損失を制御し、単一の取引を避けるために、停止損失価格を事前に設定します

See all articles