从数组中删除项目无效

Question

我有一个名为cartarray的格式的数组。

1: {id: "1510-01-312-3501-OkqcPp3xJwfgmNinwGsKZmAa8xt1-1514542566148", name: "AIRPLANE UTILITY", price: "$90", quantity: "1"}

2: {id: "1510-00-033-6312-OkqcPp3xJwfgmNinwGsKZmAa8xt1-1514540733034", name: "AIRPLANE UTILITY", price: "$43", quantity: "3"}

3: {id: "1510-00-033-6312-OkqcPp3xJwfgmNinwGsKZmAa8xt1-1514540733034", name: "AIRPLANE UTILITY", price: "$43", quantity: "1"}

下面的html由上面的数组填充

cartarry.products.forEach(function(element) {
    var id = element.id;
    var itemname = element.name;
    var itemprice = element.price;
    var itemcard = `
              <div class="product" id="${id}">
                        <div class="product-image">
                          <img src="https://s.cdpn.io/3/dingo-dog-bones.jpg">
                        </div>
                        <div class="product-details">
                          <div class="product-title">Dingo Dog Bones</div>
                          <p class="product-description"> ${itemname}</p>
                        </div>
                        <div class="product-price">${itemprice}</div>
                        <div class="product-quantity">
                          <input type="number" value="2" min="1">
                        </div>
                        <div class="product-removal">
                          <button class="remove-product">
                            Remove
                          </button>
                        </div>
                <div class="product-line-price">25.98</div>
                </div>

            `;
    itemcontainer.innerHTML += itemcard;
})       

我想要做的是删除数组中单击的项目，所以我尝试了这个

var items = cartarry.products;
$('.product').on('click', function(element) {

    console.log(this.id)

    var index = items.indexOf(this);
    console.log(index)

    var i = items.indexOf(this);
    if (i != -1) {
        items.splice(i, 1);
    }
})  

无论我点击的项目是什么，我一直得到的索引是-1，这阻止了项目被删除。如何修复此问题并从阵列中删除已点击的项目？

Answer 1

首先，您从“cartarry.products”创建了一个“item”对象，您将无法从cartarry.products中删除该元素，因为您要从item中删除它，您可以使用此代码通过特定的元素查找元素属性：

  var index = cartarry.products.map(function(element) {
          return element.id;
        }).indexOf(this.id);

我为你创建了一个plunker示例：

https://embed.plnkr.co/qWlUy6NxAG3ERjDXD0LL/

Answer 2

你不会在你的数组中找到this，因为this是一个DOM元素。

您可以使用Array.findIndex搜索包含您的id的项目的索引

var findId = this.id;

var match = items.findIndex(function (el) {
  return el.id == findId;
});

if (match > -1) {
  items.splice(match, 1);
}

Answer 3

$('.product').on(
    'click',
    ({ id }) => cartarry.products = carrtarry.products.filter(pr => pr.id != id)
)

在您的原始代码中，this是被点击的DOM元素，而不是您的实际产品。上面的代码从点击的元素中获取id，并且只获取没有点击的id的cartarry产品。