行ったこと
- 削除ボタンを動的に追加
→動的に追加した削除ボタンに、「押したら一番近い親要素を削除」
イベントを登録したい
実装
HTML
<div id="a">
<div id="b">
<!-- ここにボタンを追加する -->
</div>
</div>
Javascript
$("#b").append("<button class="delete" type="button">削除</button>");
ボタン要素が追加されました。ディベロッパーツールでは下記のようになります。
HTML
<div id="a">
<div id="b">
<button class="delete" type="button">削除</button>
</div>
</div>
次に、この動的に追加されたボタンをクリックすると親要素(id="b")が削除されるイベントを登録します。
Javascript
$('.delete').on('click',(e) => {
$(e.target).remove();
});
とすると、あれ、何もおこらない、、、
動的に追加した要素へのイベント登録の場合は、書き方を変えなければいけない
$(document).on('click', '.delete', (e) => {
$(e.target).parent().remove();
});
上記のように、書き直すことで、無事イベントを呼び出すことができた。