jQueryでappendした要素を削除する方法を解説！
jQueryでappendした要素を削除する方法をサンプルコード付きで解説します。jQueryでappendした要素を削除するために用いるメソッドは、remove()メソッドです。ここではよく用いるclickイベントを用いて、appendした要素を削除します。
jQueryでappendした要素が消えない
jQueryで要素を消すには、消したい要素を指定してremove()を実行すれば消すことができます。
しかし、jQueryのappend()などで後から追加した要素に対してクリックイベントを介してremove()を実行しても消えない場合があります。
下記のサンプルコードを見てみましょう。
本来「追加」ボタンをクリックして、動的に追加された「追加されたボタン」は、クリックすると、jQueryのremove()で消えるはずです。
しかしappend()で後から追加した要素に、クリックイベントを介してremove()を実行しても、発火せず消えません。
今回はこのようなケースでjQueryでappend()した要素を削除する方法を解説していきます。
jQueryでappendした要素を削除する方法
jQueryでappend()した要素を消すには、結果的にはremove()メソッドを用います。
ただし後から動的に追加された要素に対しては以下のようなコードを用いて、要素を削除します。
appendされた要素を削除
$(document).on('click', 'appendされた要素を示すセレクタ', function () {
$(this).remove();
});実際にサンプルコードを用意したので、挙動を確認してみましょう。
ポイントとしては$(document).onでクリックイベント時の処理を設定しているところになります。
jQueryのappend()など後から動的に追加した要素にはイベントが発火しない場合があり、その際には上記のようなイベントハンドラの指定方法で上手くいきます。
まとめ
いかがでしたでしょうか？
jQueryでappend()した要素に対してイベントを発火させる場合には、工夫が必要なので上記で紹介した記事を参照しつつ、remove()メソッドを用いてjQueryでappend()した要素を削除してください。
