Как я могу использовать «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

Измените идентификатор на класс, чтобы его можно было повторно использовать

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