title: creat event listener for each product JS
body: <p>I have to build an event listener that listens for a click to delete the product it's linked to; for this I was asked to use <code>element.closest()</code>.</p>
  <p>Here is the HTML that is being generated for each product:</p>
  <pre><code>&lt;article class=&quot;cart__item&quot; data-id=&quot;${product._id}&quot; data-color=&quot;${chosenProduct.color}&quot;&gt;
    &lt;div class=&quot;cart__item__img&quot;&gt;
      &lt;img src=&quot;${product.imageUrl}&quot; alt=&quot;${product.altTxt}&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;cart__item__content&quot;&gt;
      &lt;div class=&quot;cart__item__content__description&quot;&gt;
        &lt;h2&gt;${product.name}&lt;/h2&gt;
        &lt;p&gt;${chosenProduct.color}&lt;/p&gt;
        &lt;p&gt;${product.price}€&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cart__item__content__settings&quot;&gt;
        &lt;div class=&quot;cart__item__content__settings__quantity&quot;&gt;
          &lt;p&gt;Qté : ${quantity}&lt;/p&gt;
          &lt;input type=&quot;number&quot; class=&quot;itemQuantity&quot; name=&quot;itemQuantity&quot; min=&quot;1&quot; max=&quot;100&quot; value=&quot;${quantity}&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;cart__item__content__settings__delete&quot;&gt;
          &lt;p class=&quot;deleteItem&quot;&gt;Supprimer&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  <p>As you can see, the identity of the product is inside the article tag.</p>
  <p>I launch my function with the event listener with a delay, to make sure the HTML is created, so that I can collect the button(s).</p>
  <pre><code>window.setTimeout(function deleteButton() {
    const buttons = document.querySelectorAll(&quot;.deleteItem&quot;);
  
    buttons.forEach((button) =&gt; {
      button.addEventListener(&quot;click&quot;, deleteProduct);
    });
  }, 800);
  </code></pre>
  <p>With this code, each button responds to the function, but they only delete the first product.</p>
  <p>Here is what the delete function looks like:</p>
  <pre><code>function deleteProduct() {
    const itemToDelete = document.querySelector(&quot;.cart__item__content&quot;);
    const idProductToDelete = itemToDelete.closest(&quot;article&quot;).getAttribute(&quot;data-id&quot;);
    const colorProductToDelete = itemToDelete.closest(&quot;article&quot;).getAttribute(&quot;data-color&quot;);
    const productToDelete = &quot;product-&quot; + idProductToDelete + &quot;-&quot; + colorProductToDelete;
    //remove the item from local storage
    localStorage.removeItem(productToDelete);
    //remove from the html instantly
    deleteHtml();
  }
  </code></pre>
  <p>What I understand is that: <code>element.closest()</code> only works with <code>querySelector()</code> (I can't get it to work with <code>getElements</code> etc...), but <code>querySelector()</code> returns only the first element it finds.</p>
  <p>How can I make this work?</p>