（Vanila JS DOM）为什么删除按钮不适用于所有“删除”类..？

Question

我正在尝试我的第一个普通 JS CRUD DOM 操作项目。我已经完成了添加项目功能，但是删除功能无法正常工作。HTML代码上有多个删除按钮，我希望单击按钮时将其删除。但是，它仅适用于列表中的第一项。如果我单击第二个或第三个删除按钮，它根本不起作用。

document.querySelector('li').addEventListener('click', deleteOrTick);

//deleteTick

function deleteOrTick(e) {

  console.log("check click")

  if (e.target.className == 'delete') {

    console.log("delete clicked")

  }

  deleteTask(e);

  // delete task

  function deleteTask(e) {

    let remove = e.target.parentNode;

    let parentNode = remove.parentNode;

    parentNode.removeChild(remove);

  }

}

deleteOrTick();

<ul class="card-list row m-2 d-flex flex-row justify-content-center" id="card">

  <li class="card border-success m-3" style="width: 18rem;">

    <div class="card-body">

      <h2 class="card-title">にほんご</h2>

      <p class="card-text">Japanese</p>

    </div>

    <button type="button" class="btn btn-outline-info">update</button>

    <button type="button" class="btn btn-outline-danger delete">delete</button>

  </li>

  <li class="card border-success m-3" style="width: 18rem;">

    <div class="card-body">

      <h2 class="card-title">おはよう</h2>

      <p class="card-text">Good morning</p>

    </div>

    <button type="button" class="btn btn-outline-info">update</button>

    <button type="button" class="btn btn-outline-danger delete">delete</button>

  </li>

  <li class="card border-success m-3" style="width: 18rem;">

    <div class="card-body">

      <h2 class="card-title">にほんご</h2>

      <p class="card-text">Japanese</p>

    </div>

    <button type="button" class="btn btn-outline-info">update</button>

    <button type="button" class="btn btn-outline-danger delete">delete</button>

  </li>

</ul>

Answer 1

document.querySelector 返回第一个选定的元素。也没有一个函数在另一个函数中最后为什么在加载时调用删除？我认为你的意思是委托document.getElementById('card').addEventListener('click', function(e) {&nbsp; const tgt = e.target;&nbsp; const parent = tgt.closest('li');&nbsp; if (tgt.classList.contains('delete')) parent.remove();&nbsp; else if (tgt.classList.contains('update')) console.log("Update clicked for ",parent.querySelector(".card-title").textContent)})<ul class="card-list row m-2 d-flex flex-row justify-content-center" id="card">&nbsp; <li class="card border-success m-3" style="width: 18rem;">&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h2 class="card-title">にほんご</h2>&nbsp; &nbsp; &nbsp; <p class="card-text">Japanese</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <button type="button" class="btn btn-outline-info update">update</button>&nbsp; &nbsp; <button type="button" class="btn btn-outline-danger delete">delete</button>&nbsp; </li>&nbsp; <li class="card border-success m-3" style="width: 18rem;">&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h2 class="card-title">おはよう</h2>&nbsp; &nbsp; &nbsp; <p class="card-text">Good morning</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <button type="button" class="btn btn-outline-info update">update</button>&nbsp; &nbsp; <button type="button" class="btn btn-outline-danger delete">delete</button>&nbsp; </li>&nbsp; <li class="card border-success m-3" style="width: 18rem;">&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h2 class="card-title">にほんご</h2>&nbsp; &nbsp; &nbsp; <p class="card-text">Japanese</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <button type="button" class="btn btn-outline-info update">update</button>&nbsp; &nbsp; <button type="button" class="btn btn-outline-danger delete">delete</button>&nbsp; </li></ul>

Answer 2

因为querySelector()只返回第一个匹配项：Document 方法 querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回 null。window.getElementsByTagName()可能更适合您的情况

Answer 3

我总是建议这样做。向您的 HTML 代码添加一些语义。在本例中添加 classNames&nbsp;translation-card-list、translation-card等通过将侦听事件委托给元素document并使用target事件参数的属性来利用事件冒泡。这样，您只有一个侦听器来提高性能，并且通过委派，您可以在运行时添加按钮，而无需以EventListeners复杂的方式添加新按钮使用closest的方法来使用Event我target在第 1 节中添加的语义;(function(d) {&nbsp; const classNameCard = 'translations-card';&nbsp; const classNameUpdateButton = 'translations-card-update-button';&nbsp; const classNameDeleteButton = 'translations-card-delete-button';&nbsp;&nbsp;&nbsp; const onClick = function(e) {&nbsp; &nbsp; const target = e.target&nbsp; &nbsp; if (!target.closest(`.${classNameCard}`)) {&nbsp; &nbsp; &nbsp; return false&nbsp; &nbsp; }&nbsp; &nbsp; if (target.closest(`.${classNameUpdateButton}`)) {&nbsp; &nbsp; &nbsp; updateAction(e);&nbsp; &nbsp; } else if (target.closest(`.${classNameDeleteButton}`)) {&nbsp; &nbsp; &nbsp; deleteAction(e);&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp;&nbsp; const updateAction = function(e) {&nbsp; &nbsp; console.log('update')&nbsp; }&nbsp; const deleteAction = function(e) {&nbsp; &nbsp; const card = e.target.closest(`.${classNameCard}`);&nbsp; &nbsp; const cardList = card.parentNode;&nbsp; &nbsp; cardList.removeChild(card);&nbsp; }&nbsp;&nbsp;&nbsp; d.addEventListener('click', onClick)&nbsp;&nbsp;}(document));<ul class="translations-card-list card-list row m-2 d-flex flex-row justify-content-center" id="card">&nbsp; <li class="translations-card card border-success m-3" style="width: 18rem;">&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h2 class="card-title">にほんご</h2>&nbsp; &nbsp; &nbsp; <p class="card-text">Japanese</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <button type="button" class="translations-card-update-button btn btn-outline-info">update</button>&nbsp; &nbsp; <button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>&nbsp; </li>&nbsp; <li class="translations-card card border-success m-3" style="width: 18rem;">&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h2 class="card-title">おはよう</h2>&nbsp; &nbsp; &nbsp; <p class="card-text">Good morning</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <button type="button" class="translations-card-update-button btn btn-outline-info">update</button>&nbsp; &nbsp; <button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>&nbsp; </li>&nbsp; <li class="translations-card card border-success m-3" style="width: 18rem;">&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h2 class="card-title">にほんご</h2>&nbsp; &nbsp; &nbsp; <p class="card-text">Japanese</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <button type="button" class="translations-card-update-button btn btn-outline-info">update</button>&nbsp; &nbsp; <button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>&nbsp; </li></ul>