如何从对象数组中删除对象。在淘汰赛JS。错误：对象不支持属性或方法“删除”答案

【问题标题】：How do I remove an object from an array of objects. in knockoutJS. Error: Object doesn't support property or method 'remove'如何从对象数组中删除对象。在淘汰赛JS。错误：对象不支持属性或方法“删除”
【发布时间】：2023-03-12 13:20:01
【问题描述】：

如何从 Knockoutjs 中的对象数组中删除一个对象。我是 knockoutjs 的新手，我们将不胜感激。

A link to Jsfiddle

jsfiddle 上的 HTML 代码中的第 24 行是要删除的点击绑定。 js fiddle 上的 javascript 代码中的第 67 行是创建从数组中删除对象的函数的地方。我尝试在第 68 行和第 69 行使用 indexOf 和 splice Array 函数，它可以删除，但 DOM 没有更新。请看一下函数 removeProduct: function(product)

HTML

<div>List of Product (<span data-bind="text: products().length"></span>) 
</div>
<ul data-bind="foreach: products">
    <li><span data-bind="text:name"></span>
        <a href="#" data-bind="click: $root.removeProduct">Select</a>
    </li>

</ul>
<div>List of Group Ideas</div>
<ul data-bind="foreach: GroupIdeas">
    <li data-bind="text:name">
        <input type="button" value="Removethis" />
        <input type="button" value="vote" />
    </li>

</ul>
<div>List of Group members</div>
</body>

 Javascript



$(function () {
var viewModel = {
    productPrice: ko.observable(89),
    productQty: ko.observable(2),

    products: ko.observable([
        { name: "shoe", price: "788", id: 1 },
        { name: "blouse", price: "50", id: 2 },
        { name: "dress", price: "16", id: 3 },
        { name: "lipstick", price: "88", id: 4 },
        { name: "earring", price: "4", id: 5 },
        { name: "bra", price: "96", id: 6 },
        { name: "lingeringe", price: "48", id: 7 },
        { name: "neclace", price: "36", id: 8 },
    ]),
    GroupIdeas: ko.observable([
        { name: "shoe", price: "788", prodId: 1, selectedby: "Akuba", memId: 
1, votes: 3 },
        { name: "lingeringe", price: "48", prodId: 7, selectedby: "Isaac", 
memId: 2, votes: 6 },
    ]),
    GroupMember: ko.observable([
        { name: "Akuba", relation: "friend", id: 1 },
        { name: "Isaac", relation: "Husband", id: 2 },
        { name: "Ira", relation: "Sister", id: 3 },
        { name: "Davida", relation: "Mum", id: 4 }
    ]),
    partyPerson: ko.observable("Ida"),
    partyOrganiser: ko.observable("Royce"),
    //addProduct = function () { /* ... leave unchanged ... */ }
    removeProduct: function (product) {
        /*var indexArr = viewModel.products().indexOf(product);
        viewModel.products().splice(indexArr, 1)
        */

        viewModel.products().remove(product)
        console.log(product);
    }
};

  viewModel.totalAmt = ko.computed(function () {
      return this.productPrice() * this.productQty();
   }, viewModel);


ko.applyBindings(viewModel);
//ko.applyBindings(giftModel);
})**

【问题讨论】：

标签： jquery-ui knockout.js

【解决方案1】：

这是你的updated fiddle。

您需要将 products 设为可观察数组以利用 remove 函数。
您需要在引用products 之前引用视图模型，因此您的removeProduct 函数必须在视图模型初始化之后编写。类似于你写的totalAmt。
```
viewModel.removeProduct = function (product) {
     viewModel.products.remove(function(item){
         return item.id === product.id;
     });
}
```

【讨论】：