jQueryを使って要素を削除する方法をご紹介いたします。要素を削除するといってもremove()やempty()など、色々な方法がありますので、それぞれの違いについて解説したいと思います。
jQueryで要素を削除する色々な方法
HTMLはシンプルに以下のようにします。
1 2 3 4 | <div id="parent"> <p id="child">子要素</p></div><button id="delete">要素を削除</button> |
要素ごと削除するremove()
remove()を使うと、指定した要素毎、子要素も含めて削除します。
1 2 3 4 5 | <script>$("#delete").on("click", function(){ $("#parent").remove();});</script> |
「要素を削除」ボタンをクリックすると、HTMLは以下のように変化します。
1 | <button id="delete">要素を削除</button> |
#parentと子要素がすべて削除されていますね。
要素の中身だけを空にするempty()
empty()を使うと、要素の中身だけを空にします。
1 2 3 4 5 | <script>$("#delete").on("click", function(){ $("#parent").empty();});</script> |
削除ボタンをクリックすると、HTMLは以下のように変化します。
1 2 3 | <div id="parent"></div><button id="delete">要素を削除</button> |
#parentの中身、つまり子要素だけが削除されているのがわかりますね。
親要素のみを削除するunwrap()
unwrap()を使うと親要素のみを削除し、指定した要素は残します。
1 2 3 4 5 | <script>$("#delete").on("click", function(){ $("#child").unwrap();});</script> |
削除ボタンをクリックすると、HTMLは以下のように変化します。
1 2 | <p id="child">子要素</p><button id="delete">要素を削除</button> |
親要素である#parentのみが削除され、指定した#childは残ります。
あとがき
jQueryを使った色々な要素の削除方法についてご紹介いたしました。それぞれ挙動が異なるので、状況に合わせて使い分けましょう。