Не удаляет дело со списка to do list

Question

let work = document.querySelector(".list")
let add = document.querySelector("#add");

let list = document.querySelector("#todos")
let remove = document.querySelector("#remove")

add.addEventListener("click", function() {
  let addlist = `<div class="todos">
      <div class="work">${input.value}</div>
      <button class="remove btn btn--red" id="remove" type="button">remove</button>
      </div>`;

  list.innerHTML += addlist;
  input.value = "";

  work.addEventListener("click", checked)
  work.addEventListener("click", removework)
})

function checked(event) {
  target = event.target;
  if (target.className != "work") {
    return 0;
  }
  target.style.textDecoration = "line-through"
}

function removework(e) {
  target = e.target
  if (!target.classList.contains("remove")) {
    return 0
  }
target.closest(".todos").remove()
}

<div class="container">
  <div class="list">
    <h1>To do list</h1>
    <form class="form" action="/">
      <input id="input" class="input" type="text">
      <button class="btn" id="add" type="button">Add item</button>
    </form>
    <div class="dolist" id="todos"></div>
  </div>
</div>

Answer 1

Работает? (Увы делал с телефона, нет возможности проверить)

const btnAdd = document.querySelector('.list__add');
const inpTask = document.querySelector('.list__input');
const todosBlock = document.querySelector('.list-todos');

let todosList = [];

btnAdd.addEventListener("click", function() {
  let taskId = todosList.push({task: inpTask.value, checked: false});
  taskId--;
  
  let html = `
  <div class="list-todos__item" data-id="${taskId}">
    <div class="list-todos__task" data-id="${taskId}">${inpTask.value}</div>
    <button class="list-todos__remove btn btn--red" type="button" data-id="${taskId}">remove</button>
  </div>`;

  todosBlock.innerHTML += html;
  inpTask.value = '';
});

todosBlock.addEventListener("click", function(e) {
  if (e.target.classList.contains("list-todos__task")) {
    toggleChecked(e.target);
  }
  else if (e.target.classList.contains("list-todos__remove")) {
    removeTask(e.target);
  }
});

function toggleChecked(target) {
  let taskId = target.dataset.id;
  let taskItem = todosBlock.querySelector(`.list-todos__item[data-id="${taskId}"]`);
  let isChecked = (todosList[taskId].checked = !todosList[taskId].checked);
  
  taskItem.classList.toggle('list-todos__item--checked', isChecked);
}

function removeTask(target) {
  let taskId = target.dataset.id;
  let taskItem = todosBlock.querySelector(`.list-todos__item[data-id="${taskId}"]`);
  
  taskItem.remove();
  delete todosList[taskId];
}

.list-todos__item--checked .list-todos__task
{
  text-decoration: line-through;
}

<div class="container">
  <div class="list">
    <h1>To do list</h1>
    
    <form class="form" action="/">
      <input class="list__input" type="text">
      <button class="list__add btn" type="button">Add item</button>
    </form>
    
    <div class="list-todos"></div>
  </div>
</div>

БЛОГ НА HUSL

Не удаляет дело со списка to do list

Ответы (1 шт):