dom_dom0900_002

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>