主页 / user-650889

Максим's questions

Martin Hope
Максим
Asked: 2024-11-14 00:42:40 +0000 UTC
  • 5

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

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