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

Answer 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()。您不需要使用element搜索document.geElementById()，因为您已经将其作为参数。这是您功能的更新：

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

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

2 个答案: