Удаление с подтверждением из DOM

Question

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

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

const modal = document.querySelector('.modal')
document.querySelector('.list').addEventListener('click', (event) => {
  const target = event.target

  if (target.classList.contains('delete')) {
    const task = document.querySelector(`[data-id="${target.dataset.delete}"]`)

    deleteTask(task)
  }
})

function deleteTask(task) {
  modal.classList.remove('hidden')

  modal.addEventListener('click', (event) => {
    if (event.target.classList.contains('cancel')) {
      modal.classList.add('hidden')
      return false
    } else if (event.target.classList.contains('confirm')) {
      modal.classList.add('hidden')
      task.remove()
    }
  })
}

.modal {
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  padding: 32px;
}

.hidden {
  display: none;
}

<ul class="list">
  <li class="item" data-id="1">
    <span class="text">Первое задание 1</span>
    <button class="delete" data-delete="1">Удалить</button>
  </li>
  <li class="item" data-id="2">
    <span class="text">Первое задание 2</span>
    <button class="delete" data-delete="2">Удалить</button>
  </li>
  <li class="item" data-id="3">
    <span class="text">Первое задание 3</span>
    <button class="delete" data-delete="3">Удалить</button>
  </li>
</ul>


<div class="modal hidden">
  <h4>Вы хотите удалить это задание?</h4>
  <button class="cancel">Отмена</button>
  <button class="confirm">Удалить</button>
</div>

Answer 1

У вас была ошибка в том, что вы создавали листнеры на каждое нажатие кнопки, но не удаляли после "отмены" или "подтверждения".
Ниже исправленный код. Изменился только JS

const modal = document.querySelector('.modal');

document.querySelector('.list').addEventListener('click', (event) => {
  const target = event.target
  if (target.classList.contains('delete')) {
    const task = document.querySelector(`[data-id="${target.dataset.delete}"]`)
    deleteTask(task)
  }
})

function deleteTask(task) {
  modal.classList.remove('hidden');
  const clicker = function(event) {
    if (event.target.classList.contains('cancel')) {
      modal.classList.add('hidden')
    } else if (event.target.classList.contains('confirm')) {
      modal.classList.add('hidden')
      task.remove()
    }
    modal.removeEventListener('click', clicker);
  }
  modal.addEventListener('click', clicker);
}

.modal {
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  padding: 32px;
}

.hidden {
  display: none;
}

<ul class="list">
  <li class="item" data-id="1">
    <span class="text">Первое задание 1</span>
    <button class="delete" data-delete="1">Удалить</button>
  </li>
  <li class="item" data-id="2">
    <span class="text">Первое задание 2</span>
    <button class="delete" data-delete="2">Удалить</button>
  </li>
  <li class="item" data-id="3">
    <span class="text">Первое задание 3</span>
    <button class="delete" data-delete="3">Удалить</button>
  </li>
</ul>


<div class="modal hidden">
  <h4>Вы хотите удалить это задание?</h4>
  <button class="cancel">Отмена</button>
  <button class="confirm">Удалить</button>
</div>

БЛОГ НА HUSL

Удаление с подтверждением из DOM

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