Web 中一个脚本 JS 的两个按钮

Question

我想为每条记录放置一个 button/a 并为该具体记录放置一个 运行 脚本，但我卡住了。

Button/a:

<a class="record-delete" data-doc="<%= shop._id %>">
   <img src="/trashcan.svg" alt="delete icon" />
</a>

脚本：

const trashcan = document.querySelector('a.record-delete');
trashcan.addEventListener('click', (e) => {
        const endpoint = `/shops/${trashcan.dataset.doc}`;
        fetch(endpoint, {
             method: 'DELETE'})
        .then(response => response.json())
        .then(data => window.location.href = data.redirect)
        .catch(err => console.log(err));
        });

脚本仅适用于最后一条记录。我知道我可以使用：

document.querySelectorAll

而不是：

document.querySelector

但我不知道如何为具体 button/a 编写 运行 脚本，因为它仍然需要 具体 variable/target。

提前感谢您的帮助；）

Answer 1

也许这会有所帮助，https://jsfiddle.net/px59m3t2/

const trashcans = [...document.querySelectorAll('a.record-delete')];

trashcans.forEach(trashcan => {
  trashcan.addEventListener('click', (e) => {
    alert(e.target.parentNode.getAttribute('data-doc'));
  });
});