JavaScriptでの新しい要素の自己削除

前のレッスンでは、クリックで要素が自分自身を削除するようにする方法を学びました。

今回は、親要素内に最初は要素がない状態から始めましょう：

html<div id="parent"></div>

ループを使って9個の新しい段落を作成し、どの段落もクリックで削除されるようにしてみましょう：

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = i;
  
  p.addEventListener('click', function() {
    this.remove();
  });
  
  parent.appendChild(p);
}

Задание 1

次のコードがあります：

html<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<input type="submit" id="button">

ボタンをクリックするとリストに新しい要素が追加されるようにしてください。また、どのli要素も、クリックすると削除されるようにしてください。これは、リストに最初からあるli要素だけでなく、ボタンを押した後に作成された新しい要素にも適用されるようにします。