嗨！大家好，昨天我們做了新增以及劃掉的功能，今天讓我們來完成刪除跟切換標籤，最後讓完成的任務進入到完成區域。

刪除

1. 其實刪除跟昨天打勾確認的功能一樣是監聽任務區域是不是有被點擊，點擊的對象如果是刪除的按鈕就把這個任務刪除。所以只要在昨天的監聽事件加上判斷就行了。

addTodoElement().todoListArea.addEventListener("click",(e)=>{

    // 判斷點擊的對象是不是刪除，是的話就將任務刪除。
  if(e.target.classList[1] === "fa-trash-alt"){
    e.target.parentNode.parentNode.remove()
  }
  
  
  if(e.target.classList[0] === "check" && e.target.checked){
    e.target.parentNode.style.textDecoration = "line-through black"
  }

  if(e.target.classList[0] === "check" && !e.target.checked){
    e.target.parentNode.style.textDecoration = "none"
  }
})

切換標籤

1. 首先我們要先抓到標籤和完成區域的DOM元素，所以在我們的addTodoElement()中新增屬性。

let addTodoElement = () => {
  let todoForm = document.querySelector(".todo-form")
  let todoInput = document.querySelector(".todo-form input[type='text']")
  let todoListArea = document.querySelector(".todo-list")
  let listTemplate = document.querySelector("template")
  let finishedArea =document.querySelector(".finished-list")
  let tab = document.querySelector(".tab")
  let working = document.querySelector(".working")
  let finished = document.querySelector(".finished")
  element = {
    todoForm,
    todoInput,
    todoListArea,
    listTemplate,
    finishedArea,
    tab,
    working,
    finished,
  }
  return element
}

2. 監聽標籤區域，看是點擊到哪一個標籤，將點擊的標籤以及相對應的區域加上"active"這個class，另一個就拔掉"active"這個class。

addTodoElement().tab.addEventListener("click",(e)=>{
  switch (e.target.classList[0]) {
    case "working":
      e.target.classList.add("active")
      addTodoElement().finished.classList.remove("active")
      addTodoElement().todoListArea.classList.add("active")
      addTodoElement().finishedArea.classList.remove("active")
      break;
    case "finished":
      e.target.classList.add("active")
      addTodoElement().working.classList.remove("active")
      addTodoElement().todoListArea.classList.remove("active")
      addTodoElement().finishedArea.classList.add("active")
      break;
  }
})

將完成的任務送進完成區域

1. 在DOM中取得完成按鈕

let addTodoElement = () => {
  let todoForm = document.querySelector(".todo-form")
  let todoInput = document.querySelector(".todo-form input[type='text']")
  let todoListArea = document.querySelector(".todo-list")
  let listTemplate = document.querySelector("template")
  let finishedArea =document.querySelector(".finished-list")
  let tab = document.querySelector(".tab")
  let working = document.querySelector(".working")
  let finished = document.querySelector(".finished")
  let finishedButton = document.querySelector(".finished-button")
  element = {
    todoForm,
    todoInput,
    todoListArea,
    listTemplate,
    finishedArea,
    tab,
    working,
    finished,
    finishedButton
  }
  return element
}

2. 監聽按鈕，當點擊按鈕時，選取所有任務，然後篩選出有被劃掉的任務，最後將篩選出的任務填入完成區域，並且在任務區域刪除這些任務。

addTodoElement().finishedButton.addEventListener("click",()=>{
  let tasks = Array.from(document.querySelectorAll(".task .check"))
  //篩選出被劃掉的任務
  let checkedTasks = tasks.filter((task)=>{return task.checked})
  
  checkedTasks.forEach((task)=>{
    let clone = document.importNode(task.parentNode,true)
//將篩選任務填入完成區   
 addTodoElement().finishedArea.appendChild(clone)
    task.parentNode.remove() //在任務區刪除這些被劃掉的任務
  })

以上就是基本的刪除、切換標籤以及將任務填入完成區的功能。那如果有仔細看或是跟著做的朋友就會發現，一開始兩個區域有「目前沒有新的任務」以及「尚未有任務完成」，這兩個區域都沒有做處理。那這問題就留給明天，我們明天見！