概要

JSでToDoリストを作成しました。
inputに入力された値を読み取り、HTMLに反映。
完了タスクを削除するまでが一連の流れとなります。

HTML

index.html

<main>
  <div class="title">リスト</div>
  <div class="todo-list">
    <ul>
    </ul>

   </div>

</main>
<section>
  <input class="form" type="text">
  <button class="btn">追加</button>
</section>

HTMLは上記になります。
今回追加するToDoタスクはul要素に追加していきます。

JS

main.js

const btn = document.querySelector('.btn');

btn.addEventListener('click',() =>{ 
  const ul = document.querySelector('ul');   
  const li = document.createElement('li');
  const input = document.querySelector('.form');
  li.textContent = input.value;
  ul.appendChild(li);
  input.value = '';
  const span = document.createElement('span');
  span.textContent = '✔';
  span.classList.add('span');
  li.appendChild(span);
  span.onclick = function() {
    const listen  = confirm('削除しますか');
    if(listen === true) {
      ul.removeChild(li);
    }
  }
});

1,イベント要素の取得

今回のイベントはボタンをクリックしたときになります。button要素をquerySelectorで取得して、定数btnに保存します。
要素を取得後、addEventListenerでイベントを登録します。
これでイベントを取得することが出来たので、処理を書いていきます。

2,親要素の取得と要素の追加

今回ToDoリストを追加するのはliタグです。liタグの親要素はulになります。なので、ulタグを取得します。
親要素取得後、liタグをcreateElementで生成します。これで空のliタグが作られました。
要素が無いので、取得します。ToDoリストにはinputタグからの値を取得します。
定数inputにquerySelectorでクラスformを取得。
空のli.textContentにinput.valueを代入します。valueで値を読み込みます。
定数ulに定数liをapendChildします。
追加後、input要素を空にするためinput.valueに「''」を代入します。
上記の流れで、ToDoリストを追加することが出来ました。次に、完了したタスクを削除できるよう実装します。

3,JSで生成された要素の削除

完了タスクを削除する実装です。
まず。liタグに「✔」を追加するためにspanタグを生成します。上記と同様にcreateElementを使用します。要素の追加も上記の通りです。
先ほどと同様の手順で要素を生成すると、タスク追加時にタスクの右隣に✔がついている段階です。
目的としては、✔をクリックしたときに削除することです。
イベントを登録します。

main.js

const spanBtn = querySelector('span');
spanBtn.addEventListener('click',()=>{
  console.log(spanBtn);
});

上記のように記述すると

spanBtn is not defined

とerrorが出ます。DOM操作では、直接HTMLを操作しているわけではありません。したがって、HTML上にはspanタグはありません。
上記のようなerrorが発せられると言うわけです。

そこで下記のように記述します。

main.js

span.onclick = function() {
  const listen  = confirm('削除しますか');
  if(listen === true) {
     ul.removeChild(li);
  }
}

//定数名.イベント =関数;

そして削除する前に条件分岐でユーザーに確認します。
trueであれば親要素ulから子要素liを削除します。