Delete table row using button in knockoutJS

Question

Everbody. I am new to KnockoutJS.
I'm not going to make a student desk. A new student can be added or removed from the table.
Here is the function

function Friend(a, b){ } 

will observe the student’s details. Another function applyBinding

 function functionViewModel() 

if it is deleted, then the code will work fine, but using this code the function will not work

 this.deleteRow=function(){ fn.friends.remove(this); }; 

How to call the variable "fn" from the function "functionViewModel" for the function "Friend".
Suggest me if any better idea.

 <table border="1"> <thead> <th>Full Name</th> <th>Address</th> <th>Graduate ?</th> <th>Subject</th> <th>Remove User</th> </thead> <tbody data-bind="foreach:friends"> <tr> <td data-bind="text:fullName"></td> <td data-bind="text:address"></td> <td><input type ="checkbox" data-bind="checked:graduate"></input></td> <td><input type ="text" data-bind="value:subjects, visible:graduate"></input></td> <td><input type= "button" data-bind="click:deleteRow" value="X"></input></td> </tr> </tbody> </table> <button data-bind="click:addUser">Add User</button> <script src="D:\KnockoutJS\knockout-3.2.0.js"></script> <script> function Friend(a, b){ this.fullName=a; this.address=b; this.graduate=ko.observable(false); this.subjects=ko.observable(''); //Remove Row from Table this.deleteRow=function(){ fn.friends.remove(this); }; } function functionViewModel(){ var fn={friends:ko.observableArray([new Friend("Sofia Smith", "London"), new Friend("Liam Taylor","New York")])}; fn.addUser=function(){fn.friends.push(new Friend("Thomas Miller", "California"));}; return fn; }; ko.applyBindings(functionViewModel()); </script> 

Answer 1

I think you need to do one of the following.

• Move the removeuser function to the main view model and remove based on the index. If you want to do this, then

  http://jsfiddle.net/chLa93du/2/

In Html (View)

 <table border="1"> <thead> <th>Full Name</th> <th>Address</th> <th>Graduate ?</th> <th>Subject</th> <th>Remove User</th> </thead> <tbody data-bind="foreach:friends"> <tr> <td data-bind="text:fullName"></td> <td data-bind="text:address"></td> <td><input type ="checkbox" data-bind="checked:graduate"></input></td> <td><input type ="text" data-bind="value:subjects, visible:graduate"></input></td> <td><input type= "button" data-bind="click:$parent.removeUser" value="X"></input></td> </tr> </tbody> </table> <button data-bind="click:addUser">Add User</button> 

Your Script:

  function Friend(a, b){ this.fullName=a; this.address=b; this.graduate=ko.observable(false); this.subjects=ko.observable(''); } function functionViewModel(){ var fn={friends:ko.observableArray([new Friend("Sofia Smith", "London"), new Friend("Liam Taylor","New York")])}; fn.addUser=function(){fn.friends.push(new Friend("Thomas Miller", "California"));}; fn.removeUser = function(item){ fn.friends.remove(item); }; return fn; }; ko.applyBindings(functionViewModel()); 

2. You can save the main view model in a global variable and then access it. http://jsfiddle.net/chLa93du/

     var viewModel; function Friend(a, b){ this.fullName=a; this.address=b; this.graduate=ko.observable(false); this.subjects=ko.observable(''); this.deleteRow=function(){ viewModel.friends.remove(this); }; } function functionViewModel(){ var fn={friends:ko.observableArray([new Friend("Sofia Smith", "London"), new Friend("Liam Taylor","New York")])}; fn.addUser=function(){fn.friends.push(new Friend("Thomas Miller", "California"));}; return fn; }; viewModel = new functionViewModel();ko.applyBindings(viewModel);