【jQuery】要素をコピー・削除するメソッド(clone、remove、empty)の使い方

jQueryで要素のコピーや削除をするメソッド

こちらではjQueryのメソッドのうち、要素のコピーや削除をするメソッド(clone、remove、empty)について解説しています。

jQueryの要素を置換するメソッド一覧

メソッド 解説
clone() 要素のコピーを作成
remove([selector]) 要素を削除
empty() 全ての子要素を削除

clone()

選択した要素のコピー(クローン)を作成し、jQueryオブジェクトとして返すメソッドです。

引数にtrueを渡すとイベントハンドラもコピーされます。

clone()の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('li:first').clone().appendTo('ul');

とすると

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
	<li>りんご</li>
</ul>

のようになります。

$('li:first')で最初の要素<li>りんご</li>をコピーし、<ul>の最後に追加しています。

remove([selector])

選択した要素を削除するメソッドです。

子要素も全て削除されます。

引数のselectorは省略可能です。まずは省略したタイプから紹介します。

remove()の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('li:first').remove();

とすると

<ul>
	<li>みかん</li>
	<li>メロン</li>
</ul>

となります。

remove(selector)の使い方

remove()は引数にselector式を渡すことができます。

マッチした要素からselector式でフィルターしたものを削除します。

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

$('li').remove('.orange');

を実行すると

<ul>
	<li class="red">りんご</li>
	<li class="green">メロン</li>
</ul>

となります。

$('li')で3つの<li>が選択されますが、remove('.orange')としているのでクラスがorangeの要素だけを削除します。

empty()

選択した要素の全ての子要素を削除するメソッドです。

remove()との違いは、選択した要素自身は削除せず、その子要素のみを削除することです。

empty()の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

$('li.orange').empty();

を実行すると

<ul>
	<li class="red">りんご</li>
	<li class="orange"></li>
	<li class="green">メロン</li>
</ul>

となります。

$('li.orange')で2番めの<li>を選択し、empty()を実行しています。<li>自体は削除されずに、その子要素であるみかんという文字列が削除されます。

[prism]