事件冒泡和“这个”古怪

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>