jQueryで要素を空にする方法のご紹介です。
要素を空にする場合「empty()」と「remove()」の二つの方法があります。
それではデモで2つを確認してみましょう!
デモ
- 1
- 2
- 3
「empty」で2つ目のリストを空にする
- 1
- 2
- 3
「remove」で2つ目のリストを空にする
jQuery
$(".emptyBtn").on("click", function() { $(".list1 li").eq(1).empty(); }); $(".removeBtn").on("click", function() { $(".list2 li").eq(1).remove(); });
jQueryの説明を。
「empty」で要素を空に場合、HTMLの「<li></li>」タグを残した状態で中のテキストだけ削除します。
一方「remove」で要素を空にした場合は、「<li></li>」タグごと削除するため、利用方法に合わせて2つのタグを使い分けたいですね!
以上です!
コメント