Introduction
In my previous article I told you about:
In today's article I will tell you how to remove a specific value using the "remove" function of an Observable Array in KnockoutJS.
The remove function removes data from the Array. We can use the remove function to either remove specific data or we can remove a complete set of data in the Array at once.
Step 1
First of all you need to add an external Knockout js file into your application, you can either download it from this link: "KnockoutJS" or can download my application that is available at the begiinning of this article in Zip Format and then can use the file attached with this Zip file.
After downloading the file you need to call it in the head section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
Step 2
We can now work on our application. First we will work on the ViewModel. For that you need to add a Script tag under the Body Section and then need to add this code:
<script>
function x() {
var self = this;
self.trainee = ko.observableArray([
{ name: 'Anubhav' },
{ name: 'Mohit' },
{ name: 'Ashish' }
]);
self.sortPeople = function (name) {
self.trainee.remove(function (remove) {
return remove.name == 'Mohit';
});
}
}
ko.applyBindings(new x());
</script>
Here first I created a function named "x()".
In this function I created an object named "self" that will represent the current function.
Then I created an Observable Array named "Trainee()", consumption. In that Array I provided three names as default names.
Then a function is created named "sortPeople". In that function one more function is created, the remove function, in this remove function I declared to remove that the value that is equal to Mohit.
At the end I applied the binding to the x().
Step 3
Until now our work on ViewModel is completed so we can move towards the View of our application.
Write this code in the view part of your application:
<input type="button" data-bind="click:sortPeople" value="Click me"/>
<ul data-bind="foreach: trainee">
<li data-bind="text:name"></li>
</ul>
Here I had simply created a button that is bound to the sortPeople function, this function is bound to the click event of this button.
Then I created an Unordered List that is bound to the Array "tarinee".
So, now what will happen is that at run time all the employees will be seen but as will click on the button then that Name will be removed whose value is provided in the remove function.
The complete code of this 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">
<input type="button" data-bind="click:sortPeople" value="Click me"/>
<ul data-bind="foreach: trainee">
<li data-bind="text:name"></li>
</ul>
<script>
function x() {
var self = this;
self.trainee = ko.observableArray([
{ name: 'Anubhav' },
{ name: 'Mohit' },
{ name: 'Ashish' }
]);
self.sortPeople = function (name) {
self.trainee.remove(function (remove) {
return remove.name == 'Mohit';
});
}
}
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Output
On running the code you will get output like this one:
![remove perticular value knockout1]()
But as I click on the button then that value is removed that was declared in the function.
![remove perticular value knockout2]()
Now I am changing the value in the function so that some other value can be removed.
self.sortPeople = function (name) {
self.trainee.remove(function (remove) {
return remove.name == 'Ashish';
});
}
Now if you run the code and again click on the button then this output will be seen.
![remove perticular value knockout3]()