4章 HTML、テキスト、フォーム値の取得＆設定
削除、クローン（コピー）
要素の削除やクローン（コピー）について見てみましょう。
.remove()
マッチした要素を中身も含めて丸ごと削除します。
具体例で見てみましょう。
<ul><li class="first">太郎</li>
<li>次郎</li>
</ul>$(".first").remove();
上記を実行すると、HTMLは以下のようになります。
<ul><li>次郎</li>
</ul>なお、本家ドキュメントに記載はありませんが、削除しても返されるjQueryオブジェクトは変化しません。 .remove()前と同じjQueryオブジェクトが返されます。
.empty()
.remove()と似ていますが、.empty()は、自分自身は削除せずに、自分の中身を全て一掃します。
<ul><li class="first">太郎</li>
<li>次郎</li>
</ul>$(".first").empty();
上記を実行すると、HTMLは以下のようになります。
<ul><li class="first"></li>
<li>次郎</li>
</ul>.remove()のように引数を指定することはできません。
なお、フィルターの:emptyもあります。
.clone()
マッチした要素のクローン（コピー）を作成し、jQueryオブジェクトの形で返します。
具体例で見てみましょう。
<ul><li class="apple">リンゴ</li>
<li>いちご</li>
<li>みかん</li>
</ul>$(".apple").clone().appendTo("ul");
上記を実行すると、HTMLは以下のようになります。
<ul><li class="apple">リンゴ</li>
<li>いちご</li>
<li>みかん</li>
<li class="apple">リンゴ</li>
</ul>4番目に表示された「リンゴ」が、1番目の「リンゴ」のクローンです。
おまけに、この状態でもう一度先の.clone()を実行するとどうなるか分かりますか？ こうなります。
<ul><li class="apple">リンゴ</li>
<li>いちご</li>
<li>みかん</li>
<li class="apple">リンゴ</li>
<li class="apple">リンゴ</li>
<li class="apple">リンゴ</li>
</ul>1回目で、class="apple"が、2つになったので、2回目では、その2つ分のクローンが作られて、後ろに追加されています。
ところで、.clone()する要素にid属性が指定されていると、クローンにもそのid属性が付き、idが重複するため、.removeAttr("id")などしてクローンからid属性を削除する必要があります。その点、class属性で要素を指定すれば重複自体は問題ありませんが、上記のように複数回呼び出す際は問題となり得るため、必要に応じてクローンから不要なクラスを削除するなりしましょう。（クラスの指定方法を工夫すれば、避けられたりもします）