【jQuery】要素を削除する完全ガイド｜remove・detach・empty・フェードアウト後削除・条件付き削除まで

jQueryで要素を削除する方法は複数あり、用途によって使い分けが必要です。この記事ではremove・detach・emptyの違い・アニメーション後に削除・条件付き削除・Ajaxリスト操作まで解説します。

remove / detach / empty の違い

remove() の基本的な使い方

$(function () {
  // 特定の要素を削除
  $('#target').remove();

  // ボタンクリックで親要素（リスト行）を削除
  $(document).on('click', '.delete-btn', function () {
    $(this).closest('li').remove();
  });

  // セレクター条件付き削除
  $('li').remove('.is-done'); // is-doneクラスを持つliだけ削除

  // 複数の要素を削除
  $('.temp, .preview').remove();
});

フェードアウト・スライドアップ後に削除する

$(function () {
  // フェードアウトして削除
  $(document).on('click', '.delete-btn', function () {
    $(this).closest('.card')
      .fadeOut(300, function () {
        $(this).remove(); // アニメーション完了後に削除
      });
  });

  // スライドアップして削除
  $(document).on('click', '.remove-row', function () {
    $(this).closest('tr')
      .slideUp(200, function () {
        $(this).remove();
      });
  });
});

detach() で一時取り外し・再挿入する

$(function () {
  // DOMを一時的に取り外して高速操作（大量の要素に追記する場合など）
  var $list = $('#big-list').detach(); // イベントを保持したままDOMから外す

  for (var i = 0; i < 1000; i++) {
    $list.append('<li>アイテム ' + i + '</li>'); // DOM外で操作（再描画なし）
  }

  $('body').append($list); // 元の位置に再挿入

  // イベントが保持されているため、detach前にバインドしたイベントが引き続き動作
});

empty() で中身をリセットして再描画する

$(function () {
  // コンテンツをリセット
  $('#content').empty();

  // Ajax取得後にコンテンツを差し替える（よく使うパターン）
  function refreshList() {
    $('#user-list').empty();
    $.getJSON('/api/users', function (users) {
      $.each(users, function (i, user) {
        $('#user-list').append(
          $('<li>').text(user.name)
            .append($('<button class="delete-btn">').text('削除').data('id', user.id))
        );
      });
    });
  }

  refreshList();
});

削除前に確認ダイアログを表示する

$(function () {
  $(document).on('click', '.delete-btn', function () {
    var $row = $(this).closest('tr');
    var name = $row.find('.name-col').text();

    if (!confirm('「' + name + '」を削除してもよいですか？')) return;

    var id = $(this).data('id');

    // Ajaxで削除APIを叩く
    $.ajax({ url: '/api/items/' + id, type: 'DELETE' })
      .done(function () {
        $row.fadeOut(200, function () { $(this).remove(); });
      })
      .fail(function () {
        alert('削除に失敗しました');
      });
  });
});

まとめ

jQueryで要素を削除する際のポイントをまとめます。

• remove(): 完全削除（イベント消える）
• detach(): 一時取り外し（イベント保持・再挿入可能）
• empty(): 子要素をクリア（自分自身は残る）
• アニメーション後削除: .fadeOut(ms, function() { $(this).remove(); })
• Ajax削除: APIを叩いてから成功時にDOMを削除する

関連記事: 要素を別の要素に置き換える方法 / 最も近い親要素を取得する方法

よくある質問（FAQ）