主页 / 问题 / 1599713
Accepted
Максим
Asked:2024-11-14 00:42:40 +0000 UTC2024-11-14 00:42:40 +0000 UTC

如果在模态窗口中取消删除任务，然后删除任务，则之前取消删除的任务将被删除

  • 772

告诉我可能是什么问题，每次点击删除按钮，然后在模态窗口中点击取消按钮，点击另一个任务删除按钮并确认操作后，两者都被删除

// Создаем элемент модального окна
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)
}
})
javascript

1 个回答

  1. Best Answer

    confirmButton.addEventListener('click'在处理程序内部调用tasksList.addEventListener('click'- 这意味着每次单击删除按钮时，都会向按钮confirmButton添加一个附加处理程序cancelButton。

    如果打开模型窗口 5 次，每个按钮上将有 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();
})
    • 0

相关问题