jQuery逆引きリファレンス
既存の要素を削除するには？ ― remove／emptyメソッド
指定した要素そのもの／要素の中身（＝子要素）を削除する方法を説明する。
既存の要素を削除するには、remove／emptyメソッドを利用します。以下では、サンプルを交えながら、それぞれの違いを解説します。
指定された要素を削除するremoveメソッド
まず、removeメソッドは指定された要素そのものを削除するのがremoveメソッドの役割です。例えば以下は、id="composition"である要素を削除する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<h3 id="composition">弦楽三重奏</h3>
<div id="main">
<p>ヴァイオリン</p>
<p>ヴィオラ</p>
<p>チェロ</p>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('#composition').remove();
});
</script>
</body>
</html>
|
ページのロードが完了すると……
指定された要素の中身を削除するemptyメソッド
一方、指定された要素そのものではなく、要素の中身（＝配下のコンテンツ）を削除するのがemptyメソッドの役割です。
先ほどのリストの太字部分をemptyメソッドで、以下のように置き換えてみましょう。
|
$('#composition').empty();
|
確かに外枠（<div>要素）のスタイルはそのままに、中のテキストだけが破棄されていることが確認できます。
API：jQuery() カテゴリ：Core（コア）
API：.remove()｜.empty() カテゴリ：Manipulation（操作） > DOM Removal（DOM削除）
※以下では、本稿の前後を合わせて5回分（第54回～第58回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
54. 既存の要素を別の要素で置き換えるには？ ― replaceWith／replaceAllメソッド
既存の要素を選択し、それをHTML文字列により生成した新規要素もしくはjQueryオブジェクトで置き換える方法を解説。また結果は同じになるが少し手順を変えて、HTML文字列による新規要素もしくはjQueryオブジェクトで既存の要素を置き換える方法も説明する。
55. 現在の要素セットを特定の要素でラップするには？ ― wrap／wrapAll／wrapInnerメソッド
現在の要素セットを新要素でラップする（＝新要素の子要素にする）方法を解説。メソッドを使い分けることで、要素セットに対して個々に要素全体を／全ての要素をまとめて／個々に中身（＝子要素）のみをラップできる。
56. 【現在、表示中】≫ 既存の要素を削除するには？ ― remove／emptyメソッド
指定した要素そのもの／要素の中身（＝子要素）を削除する方法を説明する。
57. 既存の要素をコピーするには？ ― cloneメソッド
既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。
