dataset 사용하여 todoList 삭제 구현

let todoList = [];

function addTodo() {
  // 여기에 기능을 구현하세요.
  const newTodoInputEl = document.getElementById("newTodo");
  todoList.push(newTodoInputEl.value);
  renderTodos();
}

function deleteTodo(index) {
  // 여기에 기능을 구현하세요.
  todoList.splice(index,1);
  renderTodos();
}

function renderTodos() {
  // 여기에 기능을 구현하세요.
  const todoUlEl = document.getElementById("todoList");
  todoUlEl.innerHTML= "";
  todoUlEl.innerHTML = todoList.map((todo, index) => 
    `<li class="todo">${todo} <button data-index="${index}">삭제</button></li>`
  ).join("");

  todoUlEl.addEventListener("click", (e)=>{

    if(e.target.tagName ==="BUTTON") {
      const index = e.target.dataset.index;
      deleteTodo(index);
    }
  })
  
  // for(let i = 0; i < todoList.length; i++) {
  //   const newTodoEl = document.createElement("li");
  //   newTodoEl.classList.add("todo");
  //   const deleteButtonEl = document.createElement("button");
  //   deleteButtonEl.textContent = "삭제";
  //   deleteButtonEl.addEventListener("click", () => deleteTodo(i));
  //   newTodoEl.textContent= todoList[i];
  //   newTodoEl.appendChild(deleteButtonEl);
  //   todoUlEl.appendChild(newTodoEl);
  // }
}
renderTodos();