模态中删除确认的任务。但是，问题是，如果单击所有元素并单击“取消”按钮，然后单击任何一个元素上的“删除”按钮，则所有元素都将被删除。
我不明白怎么回事，请解释一下。
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>
