alex-lenk
@alex-lenk
Разработчик сайтов

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

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

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

  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
mizutsune
@mizutsune
Simplicity is the ultimate sophistication.
Не пойму в чем дело, разъясните пожалуйста.


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

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


Для начала поставьте 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();
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
SPART4K
@SPART4K
Middle Front-end Developer (Vue.js/Nuxt.js)
Если именно с вашей структурой то вот:
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()
}
Ответ написан
Комментировать
@Vladimir-Silenko
Недавно сталкивался с такой проблемой, и применил следующий костыль:
при нажатии на кнопку удаления, присваивал айдишник её родителя кнопке модального подтверждения, и удалял через сравнение
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы