イベントバブリングと、もともと再現可能なテストケースを持っていないため「この」おかしな

Question

謝罪 - 私は今CodePen上のものを作っています - https://codepen.io/cssgrid/pen/971328c046d97ffd24decafa20804d3b/

私は製品の束を持っています。誰かが各製品部門の内部にある削除ボタンをクリックするたびに、DOMから製品を削除したいと考えています。 私の問題は次のとおりです。実際に

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

Answer 1

：リストの最後の製品は、ユーザーが実際にクリックしたことにあるボタン:(また、jQueryのにしようとした

<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').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>