<h3>Products</h3> <ul class="prods" data-bind="foreach: products"> <li> <strong data-bind="text: name"></strong> <button class="del">Delete</button> </li> </ul>
function appViewModel() { this.products = ko.observableArray([ { name: "XBox" }, { name: "PlayStation" }, { name: "Banana" }, { name: "Wii" } ]); this.removeProduct = function(product) { this.products.remove(product); } }; var viewModel = new appViewModel(); ko.applyBindings(viewModel); // Use jQuery to catch the events $(".prods").on("click", ".del", function() { viewModel.removeProduct(ko.dataFor(this)); });