Todo項目の削除ボタンを各liに動的に付与するには、ボタン要素を作成し、クリックイベントでliの( A )()を呼び出すか、親からremoveChildする。大量要素に効率よく対応するには、ulに対してイベントの( B )を使う。
解答
A: remove
B: デリゲーション(イベント委譲)
解説
Element.remove()で自分自身を削除できる。多数の子要素に個別リスナーを付ける代わりに、親要素でイベント委譲(ターゲット判定)を行うとパフォーマンスと保守性が向上する。
使用例(サンプルコード)
[ html ]
<ul id="todo"></ul>
<script>
const ul = document.getElementById('todo');
ul.addEventListener('click', e => { // (B)
if (e.target.matches('.del')) {
e.target.closest('li').remove(); // (A)
}
});
function addItem(text){
const li = document.createElement('li');
li.textContent = text + ' ';
const btn = document.createElement('button');
btn.textContent = '削除';
btn.className = 'del';
li.append(btn);
ul.append(li);
}
addItem('サンプル');
</script>