主页 / 问题 / 1453279
Accepted
Aleksandr
Asked:2022-10-02 03:11:51 +0800 CST2022-10-02 03:11:51 +0800 CST

从 DOM 确认删除

  • 772

模态中删除确认的任务。但是，问题是，如果单击所有元素并单击“取消”按钮，然后单击任何一个元素上的“删除”按钮，则所有元素都将被删除。

我不明白怎么回事，请解释一下。

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>

javascript

1 个回答

  1. Best Answer

    您有一个错误，即您在每次单击按钮时都创建了侦听器，但在“取消”或“确认”后没有删除它们。
    以下是更正后的代码。只有JS变了

    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');
  const clicker = function(event) {
    if (event.target.classList.contains('cancel')) {
      modal.classList.add('hidden')
    } else if (event.target.classList.contains('confirm')) {
      modal.classList.add('hidden')
      task.remove()
    }
    modal.removeEventListener('click', clicker);
  }
  modal.addEventListener('click', clicker);
}
    .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>

    • 3

相关问题