如何使用“this”来定位函数中的特定 div？答案

【问题标题】：How can I use 'this' to target a specific div in a function?如何使用“this”来定位函数中的特定 div？
【发布时间】：2019-09-23 10:41:42
【问题描述】：

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

这是我删除产品的功能：

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

/// 这是我的产品行代码的 sn-p。

<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>

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

【问题讨论】：

标签： javascript dom methods scope this

【解决方案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();
  });
}

【讨论】：

【解决方案2】：

你需要把this作为参数，而不是this.element：

<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)"></i>
  </div>
</div>

并为您的功能myFunction()。您无需使用document.geElementById() 搜索element，因为您已经将它作为参数。这是您的函数的更新：

function myFunction(element){
  element.parentElement.parentElement.remove();
}

【讨论】：