JavaScript添加EventListener

Question

我用javascript制作了html.我们如何找出按下哪个删除按钮

<div id="maindiv">        
    <div id="product_1">
        <input placeholder="Add Product Name" type="text">
        <input placeholder="Cost per unit" type="number">
        <input placeholder="Number of products" type="number">
        <button id="delete_1">Delete</button>
    </div>
    <div id="product_2">
        <input placeholder="Add Product Name" type="text">
        <input placeholder="Cost per unit" type="number">
        <input placeholder="Number of products" type="number">
        <button id="delete_2">Delete</button>
    </div>
</div>

Answer 1

使用 this

var btn = document.querySelectorAll('button')
btn.forEach(function(item) {
  item.addEventListener('click', function() {
    console.log('clicked id: ' + this.id);
  });
});

<div id="maindiv">
  <div id="product_1">
    <input placeholder="Add Product Name" type="text">
    <input placeholder="Cost per unit" type="number">
    <input placeholder="Number of products" type="number">
    <button id="delete_1">Delete</button>
  </div>
  <div id="product_2">
    <input placeholder="Add Product Name" type="text">
    <input placeholder="Cost per unit" type="number">
    <input placeholder="Number of products" type="number">
    <button id="delete_2">Delete</button>
  </div>
</div>