jQueryで要素を削除する方法｜remove・empty・detachの違いを初心者向けに解説

クリックしたお知らせや、不要になったリスト項目をjQueryで消したいものの、remove()とempty()のどちらを使えばよいか迷うことがありますよね。

要素そのものを削除するならremove()、外側を残して中身だけ空にするならempty()を使います。あとで同じ要素を戻す場合は、イベントやjQueryデータを保持できるdetach()が適しています。

先に結論：通常の削除は$('.target').remove()で行えます。ただし「外枠を残す」「あとで復元する」場合は別のメソッドを選びましょう。

jQueryで要素を削除する3つの方法

最初に、よく使う3つのメソッドの違いを整理します。削除後に何が残るかを見ると、選び方が分かりやすくなります。

ここでいう「削除」は、ブラウザ上のDOM（表示中のHTML構造）から取り除くことです。データベースや元のHTMLファイルまで消えるわけではないため、ページを再読み込みすると元に戻ります。

remove()で要素そのものを削除する

remove()は、セレクタに一致した要素自身と、その中にある子要素や文字をまとめてDOMから削除します。

$('.target').remove();

たとえば、お知らせカードを削除ボタンで消す場合は次のように書きます。HTMLはindex.html、jQueryはscript.jsへ記述してください。

<article class="notice">
  <h2>メンテナンス情報</h2>
  <p>8月20日の午前2時から作業を行います。</p>
  <button type="button" class="remove-notice">閉じる</button>
</article>

$('.remove-notice').on('click', function () {
  $('.notice').remove();
});

ボタンを押すと、article.notice全体が消えます。見出しと文章だけでなく、カードの外枠も残りません。

クリックした項目だけを削除する

同じカードが複数ある場合は、すべてを選ぶのではなく、クリックされたボタンから近いカードを探します。

$('.remove-item').on('click', function () {
  $(this).closest('.item').remove();
});

$(this)はクリックされた削除ボタン、.closest('.item')はそのボタンに最も近い祖先の.itemを表します。これなら、ほかのカードまで一緒に消えません。

条件に合う要素だけを削除する

remove()には、選択済みの要素をさらに絞るセレクタを渡せます。次の2行は、どちらも完了済みの項目だけを削除します。

$('.task').remove('.is-complete');

// 初心者には、次のように最初から絞る書き方も分かりやすいです
$('.task.is-complete').remove();

文字の内容で削除対象を決めるより、is-completeやdata-status="complete"のような状態を表すclass・属性を付けると、文章を変更しても処理が壊れにくくなります。

実例でremove()・empty()・detach()を比べる

3つの枠に同じカードを置き、メソッドを実行した後に何が残るか確認します。実行前はすべてのカードが表示されています。

index.htmlには、操作する要素と結果を読み上げるaria-live領域を用意します。ボタンにはtype="button"を付け、フォーム内でも誤送信されないようにしています。

<section class="method-panel">
  <h2>remove()</h2>
  <div class="stage" id="remove-stage">
    <article class="sample-card" id="remove-target">
      <strong>メンテナンス情報</strong>
      <span>内容も外側の枠も削除されます。</span>
    </article>
  </div>
  <button type="button" id="run-remove">remove()を実行</button>
</section>

<section class="method-panel">
  <h2>empty()</h2>
  <div class="stage sample-card" id="empty-target">
    <strong>メンテナンス情報</strong>
    <span>外側の枠はそのまま残ります。</span>
  </div>
  <button type="button" id="run-empty">empty()を実行</button>
</section>

<p id="result" aria-live="polite">まだメソッドを実行していません</p>

横並びはCSS Gridで作り、画面幅が760px以下なら1列へ切り替えます。

* {
  box-sizing: border-box;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.method-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid #dce5ef;
  border-radius: 18px;
  background: #f9fbfe;
}

.stage {
  min-height: 146px;
  margin-bottom: 16px;
  border: 2px dashed #c6d4e3;
  border-radius: 14px;
}

.sample-card {
  display: flex;
  min-height: 146px;
  padding: 18px;
  flex-direction: column;
  justify-content: center;
  border: 2px solid #5c9fe0;
  border-radius: 14px;
  background: #eaf5ff;
}

@media (max-width: 760px) {
  .method-grid {
    grid-template-columns: 1fr;
  }
}

script.jsで、2つのボタンへそれぞれのメソッドを設定します。

$('#run-remove').on('click', function () {
  $('#remove-target').remove();
  $('#result').text('remove(): 要素そのものを削除しました');
  $(this).prop('disabled', true);
});

$('#run-empty').on('click', function () {
  $('#empty-target').empty();
  $('#result').text('empty(): 外側の要素を残して中身を削除しました');
  $(this).prop('disabled', true);
});

実行後は、remove()側ではカードが要素ごと消え、破線の置き場所だけが残ります。empty()側では、青い外枠は残ったまま中身だけが空になりました。

empty()で中身だけを削除する

empty()は、選択した要素自身を残し、その中の子要素と文字をすべて削除します。引数は取りません。

<ul class="item-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
</ul>

$('.item-list').empty();

実行後も<ul class="item-list"></ul>は残ります。検索結果を入れ替える箱や、モーダルの内容部分など、同じ外枠へ新しい内容を入れ直す場面に向いています。

detach()でイベントを保ったまま取り外す

detach()は見た目上はremove()と同じく要素をDOMから外します。ただし、要素へ登録したイベントやjQueryデータを保持する点が違います。

次の例では、カードをクリックした回数を増やしてから取り外し、同じ要素をappend()で戻します。

let $detachedCard = null;
let clickCount = 0;

$('#detach-target').on('click', function () {
  clickCount += 1;
  $('#click-count').text(clickCount);
});

$('#run-detach').on('click', function () {
  $detachedCard = $('#detach-target').detach();
  $('#restore').prop('disabled', false);
});

$('#restore').on('click', function () {
  $('#detach-stage').append($detachedCard);
  $('#result').text('カードを戻しました。クリック回数も保持されています');
});

下の画像では、取り外す前に2回クリックしたカードを元の場所へ戻しています。表示が復元され、クリック回数も2回のままです。

remove()で取り除いた要素を変数から再追加しても、元のjQueryイベントやデータは削除されています。同じ要素を戻す前提なら、最初からdetach()を選んでください。

親要素だけを外すunwrap()

unwrap()は、選択した要素を残し、その親要素だけを取り除きます。empty()とは削除する方向が反対です。

<div class="wrapper">
  <p class="message">この文章は残します</p>
</div>

$('.message').unwrap('.wrapper');

実行後はp.messageが残り、外側のdiv.wrapperだけがなくなります。引数へ親のセレクタを指定しておくと、意図しない親要素を外す事故を防ぎやすくなります。

消える前にアニメーションさせる

remove()は実行するとすぐに要素を削除します。フェードアウトしてから削除したい場合は、アニメーション完了後に呼ばれるコールバック内でremove()を実行します。

$('.remove-item').on('click', function () {
  const $item = $(this).closest('.item');

  $item.fadeOut(250, function () {
    $(this).remove();
  });
});

fadeOut()だけでは、要素は非表示になるだけでDOMに残ります。完全に削除する必要がある場合は、完了後のremove()まで記述してください。

remove()とhide()の違い

一時的に折りたたむ、タブを切り替えるといったUIでは、削除ではなく非表示が適切です。ユーザーが後から再表示する可能性があるかを基準に選びましょう。

要素を削除できないときの確認項目

• classの前の.、idの前の#が付いているか
• jQuery本体をscript.jsより先に読み込んでいるか
• 削除ボタンがフォームを送信してページを再読み込みしていないか
• Ajaxで追加されたボタンにイベントが設定されているか
• remove()ではなくhide()だけを実行していないか
• コンソールにJavaScriptエラーが出ていないか

動的に追加された削除ボタンへ対応する

あとから追加される要素には、変更されない親要素へイベントを設定します。

$('.item-list').on('click', '.remove-item', function () {
  $(this).closest('.item').remove();
});

このイベントデリゲーションなら、処理を設定した後に追加された.remove-itemでも動作します。

削除UIで気を付けたいこと

• 購入履歴や投稿など重要なデータを消す操作では確認画面を用意する
• 削除結果をaria-live領域へ表示し、画面を見ていない利用者にも伝える
• フォーカス中の要素を削除する場合は、次に操作するボタンなどへフォーカスを移す
• サーバー側のデータも消す場合は、Ajaxの成功を確認してから表示を削除する

画面から消えたからといって、保存済みデータも削除されたとは限りません。APIやWordPressのデータを削除する処理では、通信エラー時に元へ戻せる設計も必要です。

関連するjQueryの使い方

削除ボタンのイベントや、取り外した要素を戻す方法は次の記事で詳しく確認できます。

まとめ

jQueryで要素そのものを削除する基本形は$('.target').remove()です。外側を残して中身だけ削除するならempty()、イベントやデータを保ってあとで戻すならdetach()を使います。

削除対象が複数ある場合は$(this).closest()でクリックした項目だけを選び、ユーザーへ結果が伝わる表示も用意しましょう。目的に合うメソッドを選べば、不要な要素まで消す失敗を防げます。