JavaScriptのTODOリスト3【備忘録】 #JavaScript

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Javascriptの練習</title>

  </style>
</head>
<body>
  <button id="add">ADD</button>
  <li>test</li>
  <ul id = 'ul'></ul>

<script>
class Li {
  constructor(arg_num) {
    this.num = arg_num;
    this.ul = document.getElementById('ul')
    this.li = document.createElement('li');
    this.li.textContent = this.num;
    this.button = document.createElement('button');
    this.button.id = "delete" + this.num;
    this.button.classList.add("delete");
    this.button.textContent = '×';
    this.li.appendChild(this.button);
    this.ul.appendChild(this.li);

    this.button.addEventListener('click', (e) =>{
      console.log('delBtnクリック')
      this.ul.removeChild(this.li);
    });//delBtnClick
  }//constructor

}//Li

const li_el = [];
const addBtn = document.getElementById('add');
let num = 0;
addBtn.addEventListener('click', () => {
  li_el.push(new Li(num));
  num++;
});
</script>
</body>
</html>