Как правильно реализовать модальное подтверждением удаления элементов?

Если именно с вашей структурой то вот:

const modal = document.querySelector('.modal')
document.querySelector('.list').addEventListener('click', (event) => {
  const target = event.target
  var task = document.querySelector(`[data-id="${target.dataset.delete}"]`)
  if (target.classList.contains('delete')) {
  
  modal.classList.remove('hidden')
  modal.addEventListener('click', (event) => {
    if (event.target.classList.contains('cancel')) {
      modal.classList.add('hidden')
      task = null
      return false
    } else if (event.target.classList.contains('confirm')) {
      modal.classList.add('hidden')
      if (task) {
         task.remove()
      }  
    }
  })
  }
})

Но я вам рекомендую изменить логику, потому что вам не нужно слушать каждый клик в этом блоке, а именно кнопки.
Если по простому, то я бы привязал слушатель на каждый из трех элементов,
В клике кнопке привязал бы передачу id из data-id и и удалял бы если в модалке нажимаешь на delete
Так-же на всякий случай подскажу если интерфейс не очень важен - есть нативный метод confir('test'):

if (confirm('Удалить элемент?') {
 delete()
}