最終更新日:2019年09月25日jQueryのempty()メソッドを使ってHTMLの子要素を削除する事ができます。jQuery初心者向けに簡単なサンプルコードと共に解説します。empty()メソッドで特定要素を削除する方法jQueryの「empty()メソッド」の基本書式は以下の通りです。●empty()メソッドの基本書式$("セレクター").empty()HTMLにテキストを追加する「empty()メソッド」の使い方について、実際のサンプルコードで動作を確認してみましょう。「jQuery_Sample1.html」をコピーして、任意の場所に保存して下さい。{height:100px;width:300px;background-color:#ff9696;}</style></head><body><button>クリックして下さい</button><div><p>段落1のテキストです。</p><p>段落2のテキストです。</p></div></body></html>--------------------サンプルコードには、段落(p)要素が二つあります。empty()メソッドは、指定の子要素を削除しますので、二つの段落のテキストが削除されます。「empty()メソッド」を使って、特定の子要素を削除する方法について確認してみましょう。サンプルコードの「jQuery_Sample2.html」をコピーして、任意の場所に保存して下さい。{height:150px;width:200px;background-color:#ff9696;}</style></head><body><button>クリックして下さい</button><div><p>段落1のテキストです。id="sample1">段落2のテキストです。</p></div></body></html>--------------------emptyメソッドの前の括弧に削除したい子要素に設定されているセレクタ名を指定します。段落要素は二つありますが、その内id属性の値が「sample1」の段落のテキストが削除されます。「empty()メソッド」で複数の要素を削除する事ができます。サンプルコードの「jQuery_Sample3.html」をコピーして、任意の場所に保存して下さい。#ff9696;}</style></head><body><button>クリックして下さい</button><p>段落0のテキストです。class="font1">段落1のテキストです。class="font2">段落2のテキストです。id=font3>段落3のテキストです。</p></body></html>--------------------4つの段落の内、3つの段落要素のフォントカラーをCSSで指定しています。この内、クラスセレクタの「.font1」、とisセレクタの「#font3」のスタイルを削除しています。青色のテキストとピンク色のテキストが削除されます。渋谷区Tweetおすすめ記事jQueryのremoveClassメソッドでクラスを削除する方法jQueryのremoveClassメソッドでクラスを削除する方法jQueryのremoveClass()メソッドは要素に指定されたクラスを削除する事ができるメソッドです。jQuery初心...jQueryのdetachメソッドで要素を削除する方法jQueryのdetachメソッドで要素を削除する方法jQueryのdetach()メソッドを使ってHTMLの要素を削除する事ができます。jQuery初心者向けに簡単なサンプ...jQueryのprependメソッドで要素を追加する方法jQueryのprependメソッドで要素を追加する方法コンテンツをHTML要素に追加するjQueryのprepend()メソッドの使い方を確認してみましょう。コーダーを募集します。運営会社|サイトマップ|利用規約|プライバシーポリシー|お問い合わせ|企業担当者様へインターノウスのプロエンジニアでは、ITエンジニア・IT技術者の上流工程求人や、転職・キャリアアップ情報を発信しています。プログラマ、SE、ネットワークエンジニア、ITコンサルなど上流、プロジェクトマネジメントを目指す全てのITエンジニアをサポートします。reserved.無料キャリア相談をする未経験からエンジニアを目指す。