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>

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

标签： javascriptdommethodsscopethis

Answer 1

Change the ID to a class, so it can be reused

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

Add event handlers for those elements

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

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