javascript - 如何使用 'this' 定位函数中的特定 div？

Question

我正在制作一个购物车网站。我需要为每个产品设置一个删除按钮，我想每次都用 this 调用相同的删除功能。你能帮我理解我做错了什么吗？请原谅我没有使用正确的术语，因为我是编码新手。

这是我删除产品的功能:

function myFunction(element){
  var element = document.getElementById("remove");
  element.parentElement.parentElement.remove();
}

///这是我的产品行代码片段。

<div class="row product">
   <div class="buttons">
        <i class="fas fa-heart" onclick="myHeart(this)"></i>
        <i class="fas fa-times"  id="remove"  onclick="myFunction(this.element)"></i>
  </div>
</div>

每次单击删除图标时，我都需要删除特定的产品行。

Answer 1

将ID改成类，这样就可以复用了

<div class="row product">
  <div class="buttons">
    <i class="fas fa-heart"></i>
    <i class="fas fa-times remove"></i>
  </div>
</div>

为这些元素添加事件处理程序

var elems = document.querySelectorAll('.remove');

for (i = 0; i < elems.length; ++i) {
  elems[i].addEventListener('click', function() {
    this.closest('.product').remove();
  });
}