jQueryでタグを削除する

王林
リリース: 2023-05-08 17:20:07
オリジナル
2731 人が閲覧しました

JQuery は、HTML ドキュメント、ドキュメント シャトル、アニメーション、イベント処理、その他多くの側面のプレゼンテーションを簡素化するために使用される人気のある JavaScript ライブラリです。 Web ページ制作では、特定のタグを削除する必要があることがよくありますが、ここでは、さまざまな状況で JQuery を使用してタグを削除するいくつかの方法を紹介します。

方法 1: タグを直接削除する

削除するタグに id 属性「example」があると仮定します。

$('#example').remove();
ログイン後にコピー

この JQuery ステートメントは、次のコマンドを使用してタグを直接削除します。 id 属性の「example」タグが Web ページから削除されました。ここで、remove メソッドは、要素とそのすべての子要素を削除できる JQuery のショートカット メソッドです。

方法 2: 特定のタグのサブ要素を削除する

タグ自体を保持したまま、特定のタグのサブ要素を削除したい場合は、empty() を使用できます。メソッド:

$('#example').empty();
ログイン後にコピー

この JQuery ステートメントは、タグ自体を削除せずに、ID 属性「example」を持つタグのすべての子要素を削除します。

方法 3: 特定のタグのサブ要素を削除する

削除するタグの ID 属性が 'example' で、サブ要素の 1 つが class 属性 ' であると仮定します。 child' を削除する必要があります :

$('#example .child').remove();
ログイン後にコピー

この JQuery ステートメントは、ID 属性 'example' を持つタグ内のクラス属性 'child' を持つすべての要素を削除します。つまり、タグ内の修飾された子要素をすべて削除します。 。

方法 4: タグ内の添え字の開始から添え字の終了までのサブ要素を削除する

削除するタグに id 属性「example」があり、それを削除するとします。または保持 添え字の開始から添え字の終了までの子要素:

//删除操作
$('#example').children().slice(start, end+1).remove();
//保留操作
$('#example').children().not(':lt('+start+')').not(':gt('+end+')').remove();
ログイン後にコピー

この JQuery ステートメントは、slice() メソッドと not() メソッドをそれぞれ使用して、ID 属性 'example' を持つタグを削除または保持します。添字は [開始、終了] の範囲内にあります。 not() メソッドで「:lt()」を使用すると、特定の値未満の添え字を持つ要素を選択することを意味し、not() メソッドで「:gt()」を使用すると、添え字を持つ要素を選択することを意味することに注意してください。特定の値より大きい要素。

方法 5: テーブルの行を削除する

テーブル 'table' の 2 番目の行を削除するとします:

$('#table tr:eq(2)').remove();
ログイン後にコピー

この JQuery ステートメントは行を削除します表のデータの行 2 で、「:eq()」は指定された添え字を持つ要素を選択することを意味します。

方法 6: 特定の DIV 内のすべてのサブ要素を削除しますが、DIV 自体は削除しません

DIV オブジェクト「例」内のすべてのサブ要素を削除するとします。

$('#example').children().remove();
ログイン後にコピー

この JQuery ステートメントは、DIV オブジェクト内のすべての子要素を削除しますが、DIV 自体は削除しません。

概要

上記は、JQuery を使用して特定のタグを削除する方法です。さまざまな状況に合わせて別の方法を選択してください。Web ページのタグをすばやく簡単に削除できるため、Webページ制作がより柔軟になります。

以上がjQueryでタグを削除するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート