Identificar o alvo de um evento com uma classe CSS

Olá Renan, tudo bem?

Desculpe a demora em retornar.

Ótima pergunta! Realmente, pode acontecer de o event.target pegar outro elemento HTML referenciado com a mesma classe, o que pode gerar problemas no funcionamento do código. Por isso, é importante sempre avaliar a melhor forma de identificar o alvo de um evento.

Usar um data-attribute pode ser uma boa solução, pois evita conflitos com outras classes CSS que possam estar presentes no elemento HTML. Além disso, é uma prática recomendada para separar as responsabilidades do HTML e do JavaScript.

Por exemplo, você pode adicionar um atributo data-id no botão de deletar, com o valor correspondente ao ID do item que será deletado. Dessa forma, no evento de clique do botão, você pode acessar o valor do data-id e realizar a ação de deletar o item correto.

Segue um exemplo de como ficaria o código utilizando um data-attribute:

HTML:

<button class="botao-simples botao-simples--excluir" data-id="1">Deletar item 1</button>
<button class="botao-simples botao-simples--excluir" data-id="2">Deletar item 2</button>

JavaScript:

document.addEventListener('click', function(evento) {
  if (evento.target.classList.contains('botao-simples--excluir')) {
    let id = evento.target.dataset.id;
    // realizar ação de deletar o item com o ID correspondente
  }
});

Espero ter ajudado.

Um abraço e bons estudos.