子要素や親要素、自要素を削除する方法をご紹介します。
自要素を削除
remove()
自要素を削除するにはremove()を使います。
HTML
|
1 2 3 |
<div> <p><strong>remove()は自要素が消える</strong></p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // p要素以下を削除 $('p').remove(); }); |
結果
|
1 2 |
<div> </div> |
<p>要素自身も含め、それ以下は丸ごと削除されました。
子要素を削除
empty()
子要素を削除するにはempty()を使います。
HTML
|
1 2 3 |
<div> <p><strong>empty()は子要素が消える</strong></p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // pの子要素以下を削除 $('p').empty(); }); |
結果
|
1 2 3 |
<div> <p></p> </div> |
<p>要素は残り、それ以下だけ削除されました。
親要素を削除
unwrap()
親要素だけを削除するにはunwrap()を使います。
HTML
|
1 2 3 |
<div> <p><strong>unwrap()は親要素のみ消える</strong></p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // p要素以下を削除 $('p').unwrap(); }); |
結果
|
1 |
<p><strong>unwrap()は親要素のみ消える</strong></p> |
親要素の<div>だけが削除され、<p>要素以下は残りました。
いろいろな削除方法
最後の要素だけ削除（:last）
最後の要素だけ削除するには、セレクタに:lastを付けて使います。
HTML
|
1 2 3 4 5 |
<div> <p><strong>empty()は子要素が消える</strong></p> <p><strong>remove()は自要素が消える</strong></p> <p><strong>unwrap()は親要素が消える</strong></p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // セレクタに :last を付けて、最後のp要素だけを削除 $('p:last').remove(); }); |
結果
|
1 2 3 4 5 |
<div> <p><strong>empty()は子要素が消える</strong></p> <p><strong>remove()は自要素が消える</strong></p> <!--最後の<p>要素だけ削除された--> </div> |
最後の<p>要素だけ削除されました。
最初の要素だけ削除する場合は:lastを:firstにすればOKですね。
2番目の要素だけ削除（.eq(1)）
2番目の要素だけ削除するにはeq()メソッドを使います。
2番目ですが0から数えるのでeq(1)となります。
HTML
|
1 2 3 4 5 |
<div> <p><strong>empty()は子要素が消える</strong></p> <p><strong>remove()は自要素が消える</strong></p> <p><strong>unwrap()は親要素が消える</strong></p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // eq(1)を使って2番目のp要素だけを削除 $('p').eq(1).remove(); }); |
結果
|
1 2 3 4 5 |
<div> <p><strong>empty()は子要素が消える</strong></p> <!--2番目の<p>要素だけ削除された--> <p><strong>unwrap()は親要素が消える</strong></p> </div> |
2番目の<p>要素だけ削除されました。
5番目ならeq(4)という風に指定します。
子要素のタグのみ削除
子要素全部ではなく、タグのみを削除することもできます。
HTML
|
1 2 3 |
<div> <p class="active"><a href="#">子要素のaタグのみ削除したい</a></p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // 子要素のタグのみ削除 $('.active').children().contents().unwrap(); }); |
結果
|
1 2 3 4 |
<div> <!--<a>タグだけが削除された--> <p class="active">子要素のaタグのみ削除したい</p> </div> |
子要素の<a>タグだけが削除され、テキストは無事残りました。
いくつかのメソッドを使った合わせ技ですが、以下のように動作しています。
children()で子要素の<a>タグを指定- さらに
contents()で<a>タグ内のテキストを指定 - テキストの親要素である
<a>タグをunwrap()で削除
グローバルメニューなどで、特定のclassが付いた要素のみリンクを削除するといったプログラムに使ってもらえますね。
