こちらでは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>
自体は削除されずに、その子要素であるみかん
という文字列が削除されます。