（Vanilla JS DOM）为什么删除按钮不适用于所有 'delete' 类..？

Question

我正在尝试我的第一个 vanilla 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

因为querySelector() returns只有第一场比赛：

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

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

Answer 2

document.querySelector returns 所选元素中的第一个。

也没有一个功能在另一个里面

最后为什么加载时调用删除？

我想你是想委派

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 3

我总是建议这样做。

为您的 HTML 代码添加一些语义。在这种情况下，添加 classNames translation-card-list、translation-card、etc
通过委托事件监听 document 元素并使用事件参数的 target 属性来利用事件冒泡。通过这种方式，您只有一个 Listener 可以提高性能，并且通过委派，您可以在运行时间添加按钮，而无需以复杂的方式添加新的 EventListeners
使用Event的target的closest方法来使用我在第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>

（Vanilla JS DOM）为什么删除按钮不适用于所有 'delete' 类..？

(Vanila JS DOM) Why delete button isn't applied for all 'delete' classes..?

javascript

dom

crud