Блог

Я хочу поместить кнопку / a для каждой записи и запустить скрипт для этой конкретной записи, но я застрял.

Кнопка / 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
 

Но я понятия не имею, как запустить скрипт для конкретной кнопки / a, поскольку ему все еще нужна конкретная переменная / цель.

Заранее благодарю вас за помощь, если сможете 😉

может быть, это поможет, 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'));
  });
});