Как удалить конкретный элемент массива через кнопку?

Question

[elo-dev]

Здравствуйте, ситуация такая, есть карточки, которые генирируются в js, у каждой свой id (1,2,3 и т.д), нужно сделать так, чтобы при нажатии на иконку корзины, удалялся именно тот элемент, на котором нажали на иконку корзины.
Вот мой код, но он удаляет только первый элемент массива, вне зависимости на какую иконку тыкнули, что в принципе логично - splice(1).

function render(id, img, title, rate, genere, sort) {
  let htmlCard = `
        <div class="col mb-4 cardVideo card-${id}">
        <div class="card">
          <img src="${img}" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">${title}</h5>
            <div class="wrapper__footer-card">
              <span class="fa fa-star rating-star"></span>
              <span class="card-rate">${rate}</span>
              <span class="card-genere">${genere}</span>
              <span class="card-sort">${sort}</span>
            </div>
          </div>
          <div class="card__delete">
            <i class="fa fa-trash" aria-hidden="true" onclick="deleteCard(${id})"></i>
          </div>
        </div>
      </div>
      `;
  if (img !== '' && title && rate && genere && sort === "Сериалы") {
    blockSerials.innerHTML += htmlCard;
  } else if (img !== '' && title && rate && genere && sort === "Фильмы") {
    blockFilms.innerHTML += htmlCard;
  }
}

let dataParse = JSON.parse(localStorage.getItem("card"));
let id = 0;
if (dataParse) {
  dataParse.forEach((el) => {
    render(el.id, el.img, el.title, el.rate, el.genere, el.sort);
    id = el.id;
  });
} else {
  localStorage.setItem("card", JSON.stringify([]));
}

function deleteCard(id){
  const target = event.target.closest('.cardVideo');
    dataParse.splice(id, 1);
    target.remove();
    console.log(dataParse);
}

Comments

[Алексей Ярков]

Сделайте пример в песочнице

[Lukmann]

попробуй найти индекс этого элемента внутри массива с помощью findIndex и удали

[elo-dev]

Алексей Ярков, https://codepen.io/elo-dev/pen/jOVzWLP

Answer 1

[webdisigner]

почему не так? жми на карточки и смотри консоль