Introduction
In my previous article you learned how to dynamically add new data to an Observable Array and how to make a data editable using Knockoutjs in an ASP.NET Application.
This article explains how to dynamically remove the data from the Observable Array.
To remove the data dynamically from the array we will use two main things, one is the "$root" and another is the function named as "removeCar".
Step 1
First of all we will work on the View Model where a function will remove the data from the array. So let's see the code for that.
<script>
function x(car, features) {
var self = this;
self.name = car;
self.feature = ko.observable(features);
}
function y() {
var self = this;
self.carModel = [
{ carName: "I20", price: 600000 },
{ carName: "Verna", price: 1200000 },
{ carName: "Duster", price: 800000 }
];
self.cars = ko.observableArray([
new x("Anubhav", self.carModel[1]),
new x("Mohit", self.carModel[0])
]);
self.addCar=function(){
self.cars.push(new x("",self.carModel[1]));
};
self.removeCar = function (cars) { self.cars.remove(cars) };
}
ko.applyBindings(new y());
</script>
In the function "x()" we create a class that will store the Buyer Name with the Car Selection made by him. Notice that the "feature" property is made observable.
After that a new function "y()" is created in which the Car Name and it's prices are declared under the carModel and after that in the "self.cars" the selection made by the buyer is shown along with his name. The "self.cars" is the Observable Array; that means that it will show the result on the UI instantly.
For making a new entry in the array we need to push the new entry into the cars array, this is done by the following code:
self.addCar=function(){
self.cars.push(new x("",self.carModel[1]));
};
You can see that for adding new data in the array I used "push()" but for removing the data we will use "remove()". For removing the data I created a function named "removeCar" as in the following:
self.removeCar = function (cars) { self.cars.remove(cars) };
Until now our work on the View Model is completed. Now we will work on the View Model so that something can be provided for the removeCar function to work.
Step 2
<table>
<thead><tr>
<th>Buyer Name</th><th>Car Name</th><th>Price</th><th></th>
</tr></thead>
<tbody data-bind="foreach: cars">
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.carModel, value: feature, optionsText: 'carName'"></select></td>
<td data-bind="text: feature().price"></td>
<td><a href="#" data-bind="click:$root.removeCar">Remove</a></td>
</tr>
</tbody>
</table>
<button data-bind="click: addCar">Add</button>
In the first <td> tag I made the data available in the TextBox that can be edited and in the second <td> tag I made the data available in the Drop Down Menu, this is done using "options" and "optionsText" that help the data to appear in the DropDown Menu; optionText represents the option property that represents each item on the screen.
Now look at the fourth <td> tag; it consists of the hyperlink and on it's click "$root.removeCar" is called. The $root prefix helps to find the removeCar function.
At the end I had taken a button to which addCar is bound, it's click will make a new entry in the array.
The complete code of the application is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication28.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<table>
<thead><tr>
<th>Buyer Name</th><th>Car Name</th><th>Price</th><th></th>
</tr></thead>
<tbody data-bind="foreach: cars">
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.carModel, value: feature, optionsText: 'carName'"></select></td>
<td data-bind="text: feature().price"></td>
<td><a href="#" data-bind="click:$root.removeCar">Remove</a></td>
</tr>
</tbody>
</table>
<button data-bind="click: addCar">Add</button>
<script>
function x(car, features) {
var self = this;
self.name = car;
self.feature = ko.observable(features);
}
function y() {
var self = this;
self.carModel = [
{ carName: "I20", price: 600000 },
{ carName: "Verna", price: 1200000 },
{ carName: "Duster", price: 800000 }
];
self.cars = ko.observableArray([
new x("Anubhav", self.carModel[1]),
new x("Mohit", self.carModel[0])
]);
self.addCar=function(){
self.cars.push(new x("",self.carModel[1]));
};
self.removeCar = function (cars) { self.cars.remove(cars) };
}
ko.applyBindings(new y());
</script>
</form>
</body>
</html>
Output
Now let's look at the output, when you run the application, this type of window will be available:
![remove data knockout1.jpg]()
After that I added two new rows of data dynamically by clicking on the "Add" button.
![remove data knockout2.jpg]()
Then I click on the "Remove" link present in the front of Rows and you can see that Raw is removed.
![remove data knockout3.jpg]()