Если отменить в модальном окне удаление задач, а потом удалить какую-либо задачу, то удаляются ранее отмененные на удаление задачи

Question

подскажите в чем может быть проблема, каждый раз нажимая кнопку удалить, затем в модальном окне нажимая кнопку ОТМЕНЫ, и после нажатия на другой задачи кнопку удалить и подтверждение операции , удаляются обе

// Создаем элемент модального окна
const modalOverlay = document.createElement('div')
modalOverlay.classList.add('modal-overlay', 'modal-overlay_hidden')
modalOverlay.innerHTML = `
    <div class="delete-modal">
        <h3 class="delete-modal__question">
            Вы действительно хотите удалить эту задачу?
        </h3>
        <div class="delete-modal__buttons">
            <button class="delete-modal__button delete-modal__cancel-button">
                Отмена
            </button>
            <button class="delete-modal__button delete-modal__confirm-button">
                Удалить
            </button>
        </div>
    </div>
`;
document.body.appendChild(modalOverlay)

// Функция для открытия модального окна
function openModal() {
    modalOverlay.classList.remove('modal-overlay_hidden')
}

// Функция для закрытия модального окна
function closeModal() {
    modalOverlay.classList.add('modal-overlay_hidden')
}

tasksList.addEventListener('click', (event) => {
    if (event.target.classList.contains('delete-button')) {
        openModal()
       
const taskId = event.target.closest('.task-item').dataset.taskId   
const confirmButton = modalOverlay.querySelector('.delete-modal__confirm-button')
const cancelButton = modalOverlay.querySelector('.delete-modal__cancel-button')

// исправление бага с удаленной задачей

confirmButton.addEventListener('click', () => {
 // Находим и удаляем задачу из массива и DOM
 const taskItem = document.querySelector(`[data-task-id="${taskId}"]`)
 const taskItemIndex = tasks.findIndex(task => task.id === taskId)
 tasks.splice(taskItemIndex, 1)
  tasksList.removeChild(taskItem)
  closeModal();
})

cancelButton.addEventListener('click', closeModal)
}
})

Answer 1

confirmButton.addEventListener('click' вызывается внутри обработчика tasksList.addEventListener('click' - это значит, что при каждом клике на кнопку удаления, кнопкам confirmButton и cancelButton добавляется **дополнительный обработчик.

Если открыть модельное окно 5 раз, на каждой кнопке будет по пять обработчиков, в каждом из которых, в замыкании, будет сохранены taskId, которые будут удаляться.

Для решения нужно

либо удалять установленный обработчик при закрытии модального окна
либо не использовать переменные из замыкания, и вынести добавление обработчиков из tasksList.addEventListener('click'

например:

var taskIdToDelete = undefined;
tasksList.addEventListener('click', (event) => {
    if (event.target.classList.contains('delete-button')) {
        openModal();
        taskIdToDelete = event.target.closest('.task-item').dataset.taskId
    }
}

confirmButton.addEventListener('click', () => {
    // Находим и удаляем задачу из массива и DOM
    const taskItem = document.querySelector(`[data-task-id="${taskIdToDelete }"]`)
    const taskItemIndex = tasks.findIndex(task => task.id === taskIdToDelete )
    tasks.splice(taskItemIndex, 1)
    tasksList.removeChild(taskItem)
    closeModal();
})

БЛОГ НА HUSL

Если отменить в модальном окне удаление задач, а потом удалить какую-либо задачу, то удаляются ранее отмененные на удаление задачи

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