JavaScript #21

2252 ワード
JavaScript テキストリンク
210804
JavaScript #21
todo Listに機能を追加します.
1.削除機能
2.更新時に消えない
作成
  • 削除ボタン
    • function paintToDo(newTodo){
  const li = document.createElement("li")
  const span = document.createElement("span")
  span.innerText = newTodo
  const button = document.createElement("button")
  button.innerText = "❌"
  li.appendChild(span)
  li.appendChild(button)
  toDoList.appendChild(li)
}

    -ボタンを追加するアクション
    function deleteToDO(){
  
}

function paintToDo(newTodo){
  const li = document.createElement("li")
  const span = document.createElement("span")
  span.innerText = newTodo
  const button = document.createElement("button")
  button.innerText = "❌"
  button.addEventListener("click",deleteToDO)
  li.appendChild(span)
  li.appendChild(button)
  toDoList.appendChild(li)
}
    buttonにaddEventListenerを追加します.
    -deleteToDo()
    現在のコードには複数のボタンがあり、どのボタンをクリックしたかを処理するために情報を入力する必要があります.
    function deleteToDO(event){
  console.log(event)
}

    このボタンはliに含まれています.eventはクリックする位置を教えています.
    ここでtargetをクリックすることをチェックできます.
    function deleteToDO(event){
  console.dir(event.target)
}

    クリックしたものがparentNodeまたはparentElementであることを知っておく必要があります.
    function deleteToDO(event){
  console.dir(event.target.parentElement.innerText)
}

    どれがクリックされたかを見ることができます.
    対応するliを削除してtodoをクリアできるようになりました.
    function deleteToDO(event){
  const li = event.target.parentElement
  li.remove()
}

    リファレンス
    https://nomadcoders.co/javascript-for-beginners/lobby
    [伯俊]オーガニック白菜(ジャワ)
    [BOJ]2857号:FBI