Как правильно реализовать модальное подтверждением удаления элементов?

Question

[Александр Янк]

Задача с подтверждением удаления в модалке. Однако, проблема, если по кликать по всем элементам и нажать на кнопку "отмену", а потом на каком-то одном элементе нажать кнопку "удалить" то удаляются все элементы.

Не пойму в чем дело, разъясните пожалуйста.

Answer 1

[Mizutsune]

Не пойму в чем дело, разъясните пожалуйста.

Действительно, что-то тут не так...

Немного об оригинальном коде из вопроса...

Для начала поставьте console.log в определенном месте своего кода:

document.querySelector('.list').addEventListener('click', (event) => {
  const target = event.target
  if (target.classList.contains('delete')) {
    const task = document.querySelector(`[data-id="${target.dataset.delete}"]`)
    // Посмотрим что будет выводиться в консоль?
    console.log(target.dataset.id)
    deleteTask(task)
  }
})

И попробуйте проделать все описанные в вопросе действия, после чего посмотрите сколько идентификаторов текущего "таска" - выводятся в консоль. Что-то тут не так... Разобраться конечно в этом можно, но нужно разбираться и тратить время...

Ну, а вообще, если как-то по простому решить проблему + немного подчистить код, то можно сделать например вот так:

const modal = document.querySelector(".modal");
const listbox = document.querySelector(".list");
const modalCancelButton = modal.querySelector(".cancel");
const modalConfirmButton = modal.querySelector(".confirm");

let currentTaskID = null;

listbox.addEventListener("click", ({ target: t }) => {
  if (t.classList.contains("delete")) {
    currentTaskID = t.dataset.delete;
    modal.classList.remove("hidden");
  }
});

modalCancelButton.addEventListener("click", () => {
  modal.classList.add("hidden");
  currentTaskID = null;
});

modalConfirmButton.addEventListener("click", () => {
  modal.classList.add("hidden");
  deleteTask(currentTaskID);
});

const deleteTask = id => id && listbox.querySelector(`[data-id="${id}"]`).remove();

Answer 2

[Алексей]

Если именно с вашей структурой то вот:

const modal = document.querySelector('.modal')
document.querySelector('.list').addEventListener('click', (event) => {
  const target = event.target
  var task = document.querySelector(`[data-id="${target.dataset.delete}"]`)
  if (target.classList.contains('delete')) {
  
  modal.classList.remove('hidden')
  modal.addEventListener('click', (event) => {
    if (event.target.classList.contains('cancel')) {
      modal.classList.add('hidden')
      task = null
      return false
    } else if (event.target.classList.contains('confirm')) {
      modal.classList.add('hidden')
      if (task) {
         task.remove()
      }  
    }
  })
  }
})

Но я вам рекомендую изменить логику, потому что вам не нужно слушать каждый клик в этом блоке, а именно кнопки.
Если по простому, то я бы привязал слушатель на каждый из трех элементов,
В клике кнопке привязал бы передачу id из data-id и и удалял бы если в модалке нажимаешь на delete
Так-же на всякий случай подскажу если интерфейс не очень важен - есть нативный метод confir('test'):

if (confirm('Удалить элемент?') {
 delete()
}

Answer 3

[Vladimir-Silenko]

Недавно сталкивался с такой проблемой, и применил следующий костыль:
при нажатии на кнопку удаления, присваивал айдишник её родителя кнопке модального подтверждения, и удалял через сравнение