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

Question

我正在尝试我的第一个普通 JS CRUD DOM 操作项目。我已经完成了添加项目功能，但是删除功能无法正常工作。HTML代码上有多个删除按钮，我希望单击按钮时将其删除。但是，它仅适用于列表中的第一项。如果我单击第二个或第三个删除按钮，它根本不起作用。document.querySelector('li').addEventListener('click', deleteOrTick);//deleteTickfunction 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) {

  const tgt = e.target;

  const parent = tgt.closest('li');

  if (tgt.classList.contains('delete')) parent.remove();

  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">

  <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">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">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">update</button>

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

  </li>

</ul>

Answer 2

因为querySelector()只返回第一个匹配项：

Document 方法 querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回 null。

window.getElementsByTagName()可能更适合您的情况

Answer 3

我总是建议这样做。

1. 向您的 HTML 代码添加一些语义。在本例中添加 classNames translation-card-list、translation-card等

2. 通过将侦听事件委托给元素document并使用target事件参数的属性来利用事件冒泡。这样，您只有一个侦听器来提高性能，并且通过委派，您可以在运行时添加按钮，而无需以EventListeners复杂的方式添加新按钮

3. 使用closest的方法来使用Event我target在第 1 节中添加的语义

;(function(d) {

  const classNameCard = 'translations-card';

  const classNameUpdateButton = 'translations-card-update-button';

  const classNameDeleteButton = 'translations-card-delete-button';

  

  const onClick = function(e) {

    const target = e.target

    if (!target.closest(`.${classNameCard}`)) {

      return false

    }

    if (target.closest(`.${classNameUpdateButton}`)) {

      updateAction(e);

    } else if (target.closest(`.${classNameDeleteButton}`)) {

      deleteAction(e);

    }

  }

  

  const updateAction = function(e) {

    console.log('update')

  }

  const deleteAction = function(e) {

    const card = e.target.closest(`.${classNameCard}`);

    const cardList = card.parentNode;

    cardList.removeChild(card);

  }

  

  d.addEventListener('click', onClick)

  

}(document));

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

  <li class="translations-card 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="translations-card-update-button btn btn-outline-info">update</button>

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

  </li>

  <li class="translations-card 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="translations-card-update-button btn btn-outline-info">update</button>

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

  </li>

  <li class="translations-card 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="translations-card-update-button btn btn-outline-info">update</button>

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

  </li>

</ul>