How to remove elements from an external observable array using KnockoutJS

Question

goal

Remove items from an external observable array using KnockoutJS.

Problem

There are two observableArray in my application. One for the available products for purchase and other products that I added to the resume by clicking the add button .

So far, everything is working fine here. But now I need to remove the elements from the Summary and change the state / style of the button - and I don’t know how to access the external observableArray for this.

To understand my problem, check out this jsFiddle or view the markup in the next section.

As you can see, when I click add button , the product goes to the summary. When I click on delete — regardless of whether the button is from the bulletin or the product — I want to change the state of the button and remove the item from the bulletin. Technically speaking, I want to remove an item from items' observableArray using products' observableArray .

My code

HTML:

 <ul class="summary"> <!-- ko foreach: Summary.items --> <p data-bind="text: name"></p> <button class="btn btn-danger btn-mini remove-item"> <i class="icon-remove">×</i> </button> <!-- /ko --> </ul> <h1>What would you to buy?</h1> <ul class="products"> <!-- ko foreach: Product.products --> <li> <h3 data-bind="text: name"></h3> <p data-bind="text: desc"></p> <!-- ko if:isAdded --> <button data-bind="if: isAdded" class="btn btn-small btn-success action remove"> <i data-bind="click: $root.Summary.remove" class="icon-ok">Remove</i> </button> <!-- /ko --> <!-- ko ifnot:isAdded --> <form data-bind="submit: function() { $root.Summary.add($data); }"> <button data-bind="ifnot: isAdded" class="btn btn-small action add"> <i class="icon-plus">Add</i> </button> </form> <!-- /ko --> </li> <!-- /ko --> </ul> 

JavaScript:

 function Product(id, name, desc) { var self = this; self.id = ko.observable(id); self.name = ko.observable(name); self.desc = ko.observable(desc); self.isAdded = ko.observable(false); } function Item(id, name) { var self = this; self.id = ko.observable(id); self.name = ko.observable(name); } function SummaryViewModel() { var self = this; self.items = ko.observableArray([]); self.add = function (item) { self.items.push(new Item(item.id(), item.name())); console.log(item); item.isAdded(true); }; self.remove = function (item) { item.isAdded(false); }; }; function ProductViewModel(products) { var self = this; self.products = ko.observableArray(products); }; var products = [ new Product(1, "GTA V", "by Rockstar"), new Product(2, "Watch_Dogs", "by Ubisoft") ]; ViewModel = { Summary: new SummaryViewModel(), Product: new ProductViewModel(products) } ko.applyBindings(ViewModel); 

Answer 1

You can find it .

You can request a cart for an item with the same identifier and delete it

 self.remove = function (item) { var inItems = self.items().filter(function(elem){ return elem.id() === item.id(); // find the item with the same id })[0]; self.items.remove(inItems); item.isAdded(false); }; 

If you do not have hundreds of thousands of items, this should be fast enough. Remember to use items.remove() so that he knows to update observableArray :)

Answer 2

Once you have declared the products as an observable array, you can simply delete it (according to this ). If you have a link to the deleted object to go through.