HTML,CSS,JavaScriptで作るtodoリスト(3)

今回はタスク削除機能の作成をメモしていきます。
前回の記事はこちらから
yuu104.hatenablog.com

上記画像の「削除」の部分をクリックするとタスクが削除されるようにします。

前回までのjavascriptファイル

const todoForm = document.getElementById('todo_form');
const add = document.getElementById('add');
const taskUl = document.getElementById('task_ul');
const taskTitle = document.querySelector('.task_title');
let tasks = [];

function addTask(doMessage) {
  //タスク要素作成・・・
  taskTitle.style.display = 'inline-block';
  tasks.push(doMessage);
  let li = document.createElement('li');
  let input = document.createElement('input');
  input.type = "checkbox";
  let div = document.createElement('div');
  let span = document.createElement('span');
  span.innerHTML = doMessage;
  let a = document.createElement('a');
  a.innerHTML = '削除';
  li.appendChild(input);
  li.appendChild(div);
  div.appendChild(span);
  div.appendChild(a);
  taskUl.appendChild(li);
  //・・・タスク要素作成

  
}


todoForm.addEventListener('submit', (e) => {
  e.preventDefault();
  let doMessage = add.value; 
  if(doMessage !== '') {
    addTask(doMessage);
  }
  document.todo_form.reset();
});

削除のためのプログラムはaddTask()関数の中に記述します。

理由

削除対象部分の要素をaddTask()関数内で作成しているため

削除機能のコード

addTask()関数内に以下のコードを記述します。

a.addEventListener('click', () => { 
      li.remove(); //①
      tasks = tasks.filter(task => {  //②
      return task !== doMessage;
      });
      if(!tasks.length) taskTitle.style.display = 'none';  //③
    });

①〜③の3部分に分けて解説します。

1. removeメソッドでタスク部分を構成する要素をまとめて削除
2. filterメソッドで配列tasksからタスクを削除
3. もしtasks配列に要素が１つもない場合、アコーディオンタイトルを非表示にする。

メッセージ

これでタスクの削除機能を実装できました。
次回はタスクの完了処理の実装を解説します。