jQuery入門 | 要素の操作 | 要素の削除 .remove() .detach() .empty() .unwrap()

要素の削除

次のメソッドを使用すると、選択した要素やコンテンツを削除できる。

.remove()メソッド

.remove()メソッドは、選択したHTML要素をDOMツリーから削除する。 このとき、削除される要素に関連するjQueryデータやイベントもすべて一緒に削除される。

次のようなHTML要素があるとき、

<p id="one">こんにちは。</p>
<p id="two">devkumaです。</p>
<p id="three">よろしくお願いします。</p>

<p>要素のうち、IDがone、twoの要素を削除する。

$("p").remove("#one, #two");

コードを実行

.detach()メソッド

.detach()メソッドは、選択した要素をDOMツリーから削除する。このとき、削除される要素に関連するjQueryデータやイベントは削除されず、そのまま保持される。

.detach()メソッドが返すjQueryオブジェクトを.append()や.prepend()のようなメソッドに引数として渡すと、削除した要素を復元することもできる。

次のようなHTML要素があるとき、

<p class="hello">こんにちは。</p>
<p>devkumaです。</p>
<p class="hello">よろしくお願いします。</p>

classがhelloのHTML要素を削除してから再び復元しても、clickイベントが消えないことを確認できる。

$("p").on("click", function() {
     $(this).toggleClass("wrap");
});
var data = null;
$("#btnDetach").on("click", function() {
    data = $(".hello").detach(); // classが"hello"の要素をすべて削除する。
});
$("#btnRestore").on("click", function() {
    $("p").after(data);  // detach()メソッドで削除されたすべての要素を再び追加する。
});

コードを実行

.empty()メソッド

.empty()メソッドは、選択した要素の子要素をすべて削除する。このとき、.remove()や.detach()メソッドとは異なり、選択された要素そのものは削除されない。

次のようなHTML要素があるとき、

<div id="container" class="wrap">
    <div>こんにちは</div>
    <div>devkumaです。</div>
    <div>よろしくお願いします。</div>
</div>

IDがcontainerの子HTML要素をすべて削除する。

$("#container").empty(); // IDが"container"の要素の子要素をすべて削除する。

コードを実行

.unwrap()メソッド

.unwrap()メソッドは、選択した要素の親要素を削除する。

次のようなHTML要素があるとき、

<div id="container" class="wrap">
    <p>こんにちは</p>
    <p>devkumaです。</p>
    <p>よろしくお願いします。</p>
</div>

$("p").unwrap(); // <p>要素の親要素を削除する。

コードを実行