jQueryで特定の要素を削除したいけどうまくいかない
どのメソッドを使えばいいかいつも悩んでしまう
子要素を削除したい
動的なWebページ制作では、不要になった要素を非表示にしたり、削除したりする場面がよくあります。
しかし、jQueryを使い始めたばかりだと、どのメソッドを使えばいいのか迷ったり、コードを書いても要素が消えないといった壁にぶつかることもあるでしょう。
本記事ではjQueryで要素を削除する方法について、初心者にも分かりやすく解説します。
jQueryの要素削除で、悩みたくない方はぜひ参考にしてみてください。
jQueryで要素を削除する基本メソッド3選
まずは、jQueryでDOM要素を削除する代表的な3つのメソッドを紹介します。
- remove()
- empty()
- detach()
それぞれの役割と違いを押さえましょう。
これらを理解すれば、目的に応じて適切な方法を選べるようになります。
remove()
remove()は指定した要素自身をまるごと削除するためのメソッドです。
選択した要素本体と、その中に含まれる全ての子要素（テキストや子孫要素も含む）をDOMから取り除きます。
たとえば、以下のようなHTMLがあるとします。
コピー<div id="container">
<p>こんにちは</p>
<p>さようなら</p>
</div>
コピー// 「#container」自体を削除
jQuery(function() {
jQuery("#container1").remove();
});
上記のコードを実行すると、#container要素および内部の<p>要素2つ全てが削除されます。画面上から該当の要素が全てなくなるイメージです。
remove()を使うと対象の要素だけでなく、その要素に覚えさせていた「クリックしたときに動く処理」や「マウスを乗せたときの反応」といった動きを実行するための設定、さらにjQueryが内部で持っているメモまでまとめて消えます。
ページ上から全てなくなるので、同じ内容をもう一度表示したい場合は、HTMLを改めて挿入するなどして作り直す必要があります。
remove()で削除した要素も変数に保存しておけば、再利用できます。ただし、クリックやマウスオーバーなどの操作に対する反応は削除された時点で失われるため注意しましょう。
empty()
empty()は指定した要素の中身（子要素）を削除するメソッドです。
要素本体（親要素）は残しつつ、その内部にある子要素を全て取り除いて空（empty）にできます。
以下のHTMLで#container内部の段落だけを消去したい場合は、empty()を使うと便利です。
コピー<div id="container">
<p>こんにちは</p>
<p>さようなら</p>
</div>
コピー// 「#container」の子要素を全て削除（中身を空に）
jQuery(function() {
jQuery("#container2").empty();
});
#containerという<div>要素自体はページ上に残りますが、その中にあった<p>要素2つは削除されます。
結果、#containerは内容が空の状態になり、開閉タグだけが残ります。
empty()は子要素のみ削除します。親要素自体は残したまま中身だけクリアしたい場合に使用しましょう。たとえばレイアウトの枠組み（親要素）は残して、中のリスト項目だけ動的に入れ替えるようなケースで役立ちます。
detach()
detach()は、remove()と同様に指定要素を削除します。
remove()と最も大きな違いは、削除した要素に紐付いたイベント処理やデータを保持したまま取り除く点です。
detach()で削除した要素は後で再度DOMに追加した際に、削除前と同じ状態（イベントがそのまま）に復活できます。
たとえば、ある要素にクリックイベントを設定しておき、remove()あるいはdetach()で一旦削除してから再度DOMに挿入するケースを考えてみましょう。
remove() で削除した要素にあとから再度クリックイベントを追加しても機能しませんが、detach() で削除した要素の場合は、再追加後もクリックイベントは正常に動作します。
detach()は要素を削除して画面から取り除きつつも、内部状態を保持して再利用したい場合に便利です。
使い方はremove()と同様ですが、戻り値として削除した要素オブジェクトを受け取ることが重要になります。
detach()は「後でまた同じ要素を戻す可能性がある」「削除と追加を繰り返すがイベントの再設定は避けたい」場合などに使うイメージです。
jQueryで要素を削除するメソッドの使い分け
jQueryの要素削除関連の3つのメソッドの違いを以下にまとめました。
| 動作 | 対象 | 動作設定・データの扱い | |
| remove() | 要素そのものを削除する | 指定要素と子要素全て | 動作設定・データも削除される |
| empty() | 要素の中身（子要素）だけを削除する | 子要素のみ（親要素は残る） | 子要素の動作設定も削除される |
| detach() | 要素そのものを削除する | 指定要素と子要素全て | 動作設定・データは保持される（再利用可能） |
大きな違いは、remove()とdetach()はどちらも要素自体を削除しますが、detach()は後で再利用できるように設定済みの動作やデータを保持することです。
empty()は、親要素はそのままで中身だけを空にします。
たとえば、一度限りのポップアップメッセージや、もう表示する必要のないコンテンツの実装にはremove()が最適です。
empty()は、動的に更新される商品リストや、フィルタリングされた検索結果の表示エリアなどで活用できます。
タブ切替時に一時的に非表示にするコンテンツや、フォームの入力内容を保持したまま別のセクションに移動させる場合などは、detach()を使用します。
目的に応じてメソッドを使い分けることで、効率的なDOMの操作とメモリ管理が可能です。
jQueryで特定の子要素を削除する方法
「子要素全部ではなく一部だけ削除したい」「特定の条件に合う子要素だけ消したい」といった場合は、jQueryのDOM選択メソッドを組み合わせる方法が効果的です。
jQueryでは、ある要素内の子要素を取得するために.children()や.find()メソッドがよく使われます。
それぞれの特徴は、以下の通りです。
| 取得する要素 | 階層 | |
| .children() | 直下の子要素のうち、セレクタにマッチするもの | 1段階下の子要素のみ |
| .find() | 指定した要素内の全ての子孫要素からセレクタにマッチするもの | 全ての階層（どれだけ深くても検索） |
取得した子要素のjQueryオブジェクトに対してremove()を呼び出すことで、親要素は残したまま子要素だけ削除できます。
コピーjQuery(function() {
jQuery("#todoList").children("li.done").remove();
});
上記では、#todoList内の直下の子要素<li>のうちクラスdoneを持つものだけを選択し、それらをremove()で削除しています。
#todoList自体は削除されず、その中の特定の<li>要素（完了済みタスク）のみが取り除かれます。
.children(“li.done”)は#todoList直下の<li>要素だけを検索しますが、この例ではリスト項目が直接その下に配置されているため問題ありません。
たとえば、もう一段入れ子構造がある場合には.find()を使用します。
コピー// 例: コンテナ内にある全ての<span class="highlight">要素を削除する
jQuery(function() {
jQuery("#container3").find("span.highlight").remove();
});
#container要素内部に存在するあらゆる階層の<span class=”highlight”>を全て見つけて削除します。
直下かどうかを意識せず、深い子孫も対象にできるのが.find()の強みです。
jQueryで動的に追加した要素を削除する方法
動的な要素を追加したいときは、jQueryのappend()で簡単に実装できます。
たとえば、ToDoリストを作るときに、ユーザーが追加ボタンをクリックしてリストに項目を増やす機能です。
しかし、あとから追加された要素にはイベントが反応しないことがあります。
削除ボタンを押しても何も起きないというのは、初心者がよくつまずくポイントです。
jQueryでは、イベントは「そのとき画面にある要素」にしか設定できないため、あとから追加された要素に対してもイベントを動作させるイベント委譲を使えば解決できます。
コピー<div>
<input type="text" id="newItem" placeholder="やることを入力">
<button id="addBtn">追加</button>
</div>
<ul id="list"></ul>
コピー// 動的
jQuery(function() {
// 追加ボタンを押したとき
jQuery("#addBtn").on("click", function() {
const text = jQuery("#newItem").val();
if (text) {
const li = `
<li>
<span class="text">${text}</span>
<button class="delBtn">削除</button>
</li>`;
jQuery("#list").append(li);
jQuery("#newItem").val("");
}
});
// チェック済み切り替え（削除ボタン以外をクリックしたとき）
jQuery("#list").on("click", "li", function(e) {
if (!jQuery(e.target).hasClass("delBtn")) {
jQuery(this).toggleClass("checked");
}
});
// 削除ボタン
jQuery("#list").on("click", ".delBtn", function() {
jQuery(this).parent().remove();
});
});
今回のコードは以下の3つの処理をしています。
- 追加ボタンを押すと、入力されたテキストがリストに追加される
- リスト項目をクリックすると、チェック済みになる
- 削除ボタンを押すと、そのリスト項目が消える
これらの2と3でイベント委譲を使用します。
チェック済みに切り替えるとき、#list（＝ulの親要素）にクリックイベントを設定しています。
liはあとから追加されるため、中でクリックされたのがliなら反応するようにするのがポイントです。
削除ボタンの設定にも、イベント委譲を使用しており、親の #list に「削除ボタンが押されたらこうしてね」と事前にルールを決めています。
イベント委譲を使えば、追加した削除ボタンでも正しく動作します。
動的な要素操作に欠かせないため、この機会に覚えておきましょう。
jQueryの要素削除でよくある5つのミスと対処法
jQueryで要素削除に失敗する主な原因5つを紹介します。
- 復元できない
- IDの重複
- jQueryライブラリの読み込み忘れ
- セレクタ指定ミス
- スクリプト実行のタイミング
要素が削除できないときは、一つずつチェックしてみてください。
1.復元できない
remove()で消した要素は、基本的に戻せません。
どうしても戻したいならdetach()や戻り値を使った復元方法を活用しましょう。
また、「非表示にしたいだけなら削除ではなく.hide()を使う」という選択もあります。
削除と非表示は目的によって使い分けてください。
2.IDの重複
重複IDはバグの原因になります。
たとえば、削除ボタンを複数生成する際に全てid=”removeBtn”としてしまうと、$(“#removeBtn”).remove()では一つか意図しない要素しか消せません。
削除対象が複数ある場合はクラス名で選択するか、連番をふるなどして任意のIDを付与しましょう。
3.jQueryライブラリの読み込み忘れ
jQueryが読み込まれていないとエラーが発生します。
<script src=”jqueryのパス”>をHTMLに含めているか、CDNを使っている場合はインターネット接続環境かを確認してください。
ブラウザのデベロッパーツールでエラーメッセージ「jQuery is not defined」が出ていたら読み込み漏れの可能性があります。
4.セレクタ指定ミス
セレクタ文字列に誤りがあると、要素は取得できず削除もできません。
たとえばID指定なのにjQuery(“#element”)ではなくjQuery(“element”)と書いてしまった、クラス指定なのにドット（.）を付け忘れた、といったミスです。
基本ですが、IDなら#、クラスなら.を付け、文字列はクォートで囲まれているか確認しましょう。
5.スクリプト実行のタイミング
HTMLの構造より先にスクリプトが実行され、削除対象の要素がまだ存在しないと、何も起こりません。
この場合、jQuery(document).ready()やjQuery(function(){ … });でDOM構築後にコードが動くようにするか、スクリプトをHTMLのbody最下部で読み込むようにしましょう。
スクリプト実行のタイミングの問題で「消えないだけ」であれば、これで解決します。
まとめ：jQueryの要素削除は目的別にメソッドを使い分ける
jQueryでの要素削除は、要素全体を消す「remove()」、中身だけ空にする「empty()」、設定を保持して削除する「detach()」の3つのメソッドを目的に応じた使い分けをおすすめします。
特定の子要素だけを削除するには「children()」や「find()」との組み合わせが効果的です。動的コンテンツでは親要素にイベント委譲を設定しましょう。
また、よくあるミスを把握しておけば迅速な問題解決にもつながります。
このような実践的なWeb制作スキルを体系的に学びたい方は、デイトラWeb制作コースがおすすめです。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！