事件冒泡和「這個」古怪

Question

道歉不是原先具有可重現測試案例 - 我現在已經做一個對CodePen： - https://codepen.io/cssgrid/pen/971328c046d97ffd24decafa20804d3b/

我有一大堆的產品。當有人點擊每個產品div內的刪除按鈕時，我想從DOM中刪除該產品。 我的問題是：在列表中的最後一個產品已經被刪除，而不是在它的按鈕，用戶實際點擊:(

<div class="product"> 
//some code 
<button class="remove-btn">Remove</button> 
</div><!-- end of product div --> 

var products = document.querySelectorAll(".product"); 
for (let i = 0; i < products.length; i++) { 
    products[i].addEventListener("click", function(e) { 
     if (e.target.classList.contains("remove-btn")) { 
      this.remove(); 
     } 
    }) 
} 

jQuery中也嘗試了產品：

$(".remove-btn").on("click", function() { 
$(this).closest(".product").remove(); 
}) 

Answer 1

其實你的代碼工作在進一步的檢查就好了。不過，我已經包括下面這更簡單和更清潔的版本。

---

如你不介意使用jQuery，

$('.remove-btn').click(function() { 
 
    $(this).parent('.product').remove(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="product"> 
 
    <p>Lorem Ipsum 1</p> 
 
    <button class="remove-btn">Remove</button> 
 
</div> 
 
<div class="product"> 
 
    <p>Lorem Ipsum 2</p> 
 
    <button class="remove-btn">Remove</button> 
 
</div> 
 
<div class="product"> 
 
    <p>Lorem Ipsum 3</p> 
 
    <button class="remove-btn">Remove</button> 
 
</div> 
 
<div class="product"> 
 
    <p>Lorem Ipsum 4</p> 
 
    <button class="remove-btn">Remove</button> 
 
</div> 
 
<div class="product"> 
 
    <p>Lorem Ipsum 5</p> 
 
    <button class="remove-btn">Remove</button> 
 
</div>