この記事の要点

.remove() = 要素自身を DOM から削除（イベントハンドラ / data も除去） .detach() = 削除するがイベントと data を保持（後で再挿入用） .empty() = 中身（子要素）だけ削除して自身は残す 入力値クリア: .val("")、テキスト: .text("")、HTML: .html("") 属性削除: .removeAttr("href")、クラス削除: .removeClass("active")

要素を DOM から削除する 3 メソッド

メソッド	動作	イベント / data	用途
.remove()	要素自身を削除	除去される	完全削除
.detach()	要素自身を削除	保持される	一時退避 → 再挿入
.empty()	子要素だけ削除	子のイベントは除去	中身入れ替え前

// 要素自身を削除（イベントハンドラも一緒に消える）
$('#item-1').remove();

// セレクタで条件付き削除
$('li').remove('.delete-me');     // 「.delete-me を持つ li」を削除
$('.notification').remove();

// 後で再利用したい場合 (detach)
const $saved = $('#sidebar').detach();
// ... 何か処理 ...
$('#main').append($saved);        // クリックハンドラもそのまま動く

// 中身だけ消す
$('#list').empty();               // <ul id="list"></ul> になる
$('#list').html('');              // 同じ結果

// 子要素を入れ替える前に
$('#list').empty().append('<li>新しい項目</li>');

入力値・テキストのクリア

// 入力フィールドの値クリア
$('input[type=text]').val('');
$('#name').val('');

// すべての input をリセット
$('form input, form textarea, form select').val('');

// フォーム全体リセット (ブラウザのデフォルトに戻る)
$('form')[0].reset();
// または
$('form').get(0).reset();

// テキストノードを空に
$('h1').text('');             // <h1></h1>

// HTML を空に（empty() と同じ）
$('#content').html('');

// チェックボックス / ラジオの解除
$('input[type=checkbox]').prop('checked', false);
$('input[type=radio]').prop('checked', false);

// select を未選択に
$('select').prop('selectedIndex', 0);  // 最初の選択肢に
$('select option:selected').prop('selected', false);

属性 / クラスの削除

// 属性削除
$('a').removeAttr('href');                  // href 削除
$('input').removeAttr('disabled readonly'); // 複数同時

// クラス削除
$('div').removeClass('active');             // 1 つ
$('div').removeClass('active selected');    // 複数 (スペース区切り)
$('div').removeClass();                     // 全クラス削除

// クラスのトグル (削除も追加も)
$('div').toggleClass('active');

// プロパティの設定/削除
$('input').prop('disabled', false);         // disabled を解除
$('input').removeProp('disabled');          // 完全削除

// data 属性削除
$('div').removeData('user-id');             // jQuery 内部 data
$('div').attr('data-user-id', null);        // HTML 属性

削除前のアニメーション

// フェードアウトしてから削除
$('#notification').fadeOut(400, function() {
    $(this).remove();
});

// スライドアップしてから削除
$('.item').slideUp(300, function() {
    $(this).remove();
});

// 複数要素のうち最後だけコールバック実行
const $items = $('.deletable');
$items.fadeOut(400);
$items.promise().done(function() {
    $items.remove();
});

// Vanilla CSS Transition + remove
$('.card').addClass('fade-out');
setTimeout(() => $('.card').remove(), 300);

生 DOM API での削除（jQuery 不要時代）

// 自分自身を削除 (IE11 非対応、Chrome 23+)
document.getElementById('item').remove();

// 親経由（古いブラウザ対応）
const el = document.getElementById('item');
el.parentNode.removeChild(el);

// 中身を空に
const el2 = document.getElementById('list');
el2.innerHTML = '';
// または
while (el2.firstChild) {
    el2.removeChild(el2.firstChild);
}

// 入力値クリア
document.querySelector('#name').value = '';

// 属性削除
document.querySelector('a').removeAttribute('href');

// クラス削除
document.querySelector('div').classList.remove('active');
document.querySelector('div').classList.toggle('active');

削除前の確認パターン

// 削除確認 → 実行
$('.delete-btn').on('click', function(e) {
    e.preventDefault();
    if (!confirm('本当に削除しますか？')) return;

    const $row = $(this).closest('tr');
    $.ajax({
        url: '/api/items/' + $row.data('id'),
        method: 'DELETE',
    }).done(function() {
        $row.fadeOut(400, function() {
            $(this).remove();
            // 全消えたら「データなし」表示
            if ($('tbody tr').length === 0) {
                $('tbody').html('<tr><td colspan="3">データがありません</td></tr>');
            }
        });
    }).fail(function() {
        alert('削除に失敗しました');
    });
});

メモリリーク防止

.remove() は関連付けられたイベントハンドラと jQuery data も削除するため、メモリリークを防ぎます。一方 .detach() を使い続けて再挿入しないと、参照が残ってリークします:

// ✅ 良い例: remove で完全クリーンアップ
$('#dialog').remove();

// ⚠️ 危険: 大量に detach した変数を捨てる
function bad() {
    const $items = $('.large-list').detach();
    // ローカル変数 $items は破棄されるが、
    // jQuery の内部キャッシュには残る → リーク
}

// ✅ 不要な要素は明示的に remove
function good() {
    const $items = $('.large-list').detach();
    // ... 処理 ...
    $items.remove();   // 最後に完全削除
}

FAQ

Q: .remove() と .empty() の違いは？
A: .remove() は要素自身を削除、.empty() は中身だけ削除して器は残します。

Q: .detach() はいつ使う？
A: 削除して再挿入するときだけ。イベントハンドラを再設定したくないケース。普通の削除は .remove()。

Q: 削除アニメーションを CSS だけで
A: .addClass("fade-out") + CSS で transition 定義し、animationend イベントで .remove() するパターンが軽量で人気です。