event bubbling and 'this' weirdness

Question

Apologies for not originally having a reproducible test case - I have now made one on CodePen:- https://codepen.io/cssgrid/pen/971328c046d97ffd24decafa20804d3b/

I have a bunch of products. I want to remove the product from the DOM whenever someone clicks a remove button which is inside each product div. My problem is: the last product in the list is being removed rather than the product with the button in it that the user actually clicked :(

<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(); 
        }
    })
}

Also tried in jQuery:

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

Try providing a [mcve], your code doesn't demonstrate the last item being removed because there is only one item. Try making it [a live demo](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). — Quentin, May 05 '17 at 15:49
I can't reproduce the problem: http://jsbin.com/gaqabo/1/edit?html,output — Quentin, May 05 '17 at 15:50
If you click `<>` and create a [mcve] your code works - possibly because SO wraps the code in an onload. As should you — mplungjan, May 05 '17 at 15:58
Where is your script placed? Needs to be placed at the end if it's vanilla JS. — kabanus, May 05 '17 at 16:02

rishipuri · Answer 1 · 2017-05-05T16:00:47.793

0

Actually your code works just fine on further inspection. But I have included a simpler and more cleaner version of it below.

As you don't mind using 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>

edited May 05 '17 at 16:00

answered May 05 '17 at 15:48

rishipuri

1,498
11
18

@Quentin - if he has jQuery it is plain silly to loop and add event handlers when he can delegate – mplungjan May 05 '17 at 15:53
I mean "What about the original code is the cause of the problem they describe?" (a problem I couldn't reproduce when I ran their code) – Quentin May 05 '17 at 15:54
1

Ah, the original could be deleted as not reproducible, but no need to downvote this much cleaner code – mplungjan May 05 '17 at 15:55
Thanks for the comment rishipuri, but I am aware of how to use jQuery to solve the problem. I am trying to use more vanilla JS. If you happen to know a non-longwinded way of rtmoving a HTML element with vanilla javascript I'd love to hear it. – Ollie_W May 05 '17 at 20:54

event bubbling and 'this' weirdness

1 Answers1