Remove selected row in table from observable Knockout array

I need more information, but let me show you an example and give you some advice:

First, tips:

• to convert your normal object to object with observable properties to arrays you can use the knockout display plugin .
• you can omit the JSON parsing step. You can just assign JSON to var like this: var JSON=*your serialized JSON*;
  
  (Don't forget the semicolon at the end.
• instead of including so much code in the data binding like:, NewAccountGroupDetails['+ $index() + '].EndDate
  
  do this calculation on the viewmodel itself, use the computed name likeEndDateName
  
  
• your viewmodel must include an observable selectedRow
  
  . When the user selects a row, put a row in there and you can use a computed observable that determines if the row is the selected row or not.
• note that you can bind events that call functions in your code, and these events carry data associated with the DOM object that raised the event. That is, if users click on the row associated with the account group details, you will get it in this case.

Example for 2:

// Instead of:
var viewModelJson = '[{"name": "Pepe"},{"name":"Juan"}]';
var viewModel = $.parseJSON(viewModelJson);

// Do this directly:

var people = [{"name": "Pepe"},{"name":"Juan"}];

      

        
        
        
      

    

Since 4 and 5 are not immediately clear, this is a simple example of what you want to achieve.

<ul data-bind="foreach: people">
    <li data-bind="text: name, click: $root.select,
       css: {red: $data == $root.selectedPerson()}" >
    </li>
</ul>    

      

        
        
        
      

    

Note that the css class red

is applied when the condition is true. And the condition is that the value associated with the current row is the same as the value in the selectedPerson

observable.

And this is the corresponding JavaScript (don't forget to include the knockout display !!)

var people = [{"name": "Pepe"},{"name":"Juan"}];

var PeopleModel = function(people) {
    var self = this;
    self.selectedPerson = ko.observable();    // This will hold the selected person
    self.people = ko.mapping.fromJS(people);  // Note ko.mapping!!
    self.select = function(person) {  // event receives the current data as 1st param
        self.selectedPerson(person);
    }
    self.delete = function(person) {
        // find de index of person and remove 1 item from that index
        self.people.splice(self.people.indexOf(person),1);
    }
    return self;
};

var peopleModel = new PeopleModel(people);

ko.applyBindings(peopleModel);

      

        
        
        
      

    

You can run the jsfiddle here .

If you change the click binding to call $root.delete

instead $root.select

, you will see the person disappear from the list when you click on it. You can of course add an additional element for this.

NOTE. You can read the docs on click binding on jockout js site .

And the last tip: it is much better to use a Web API or a method that returns a JsonResult to recover data directly from the server and save the js in a separate file.

UPDATE Small mode code.

You can add this HTML:

<input type="button" data-bind="click: removeSelected" value="removeSelected"/>

      

        
        
        
      

    

And this method in the view model:

self.removeSelected = function() {
    if (self.selectedPerson()) {
        self.delete(self.selectedPerson());
    }
};

      

        
        
        
      

    

If you do, when the button is clicked, if there is a selected item, it will be removed from the list.

UPDATE: another, more complete example

Here you have a more complete example in this script that includes the following code:

CSS

body {
    font-family: Arial;
}
.container {
    margin: 10px 0;
    border: solid 1px #ABF;
}
.container > div {
    padding: 4px;
    border: solid 1px #ABF;
    position: relative;
}
.selected {
    border: solid 1px #00A;
    color: #00A;
    background-color: #BCF;
}

      

        
        
        
      

    

HTML:

<div data-bind="foreach: people" class="container">
    <div data-bind="click: $root.select,
           css: {selected: $data == $root.selectedPerson()}" >
               <!-- ko text: name --><!-- /ko -->
               <input type="button" value="Remove" 
                   style="right:3px;top:2px; position:absolute;"
                   data-bind="click:$root.delete"/>
    </div>
</div>    

<div data-bind="visible: selectedPerson()" >
    <input type="button" data-bind="click: removeSelected" value="Remove Selected"/>
    <input type="button" data-bind="click: unSelect" value="Deselect"/>
</div>

<div data-bind="visible: selectedPerson()" class="container">
    <div>
        Selected: <!-- ko text: selectedPerson().name --><!-- /ko -->
    </div>
</div>

      

        
        
        
      

    

JavaScript:

var people = [{"name": "Pepe"},{"name":"Juan"},{"name":"Luis"},{"name":"Adolfo"}];

var PeopleModel = function(people) {
    var self = this;
    self.selectedPerson = ko.observable();    // This will hold the selected person
    self.people = ko.mapping.fromJS(people);  // Note ko.mapping!!
    self.select = function(person) { // The event receives the current data as parameter
        self.selectedPerson(person);
    };
    self.delete = function(person) {
        // find de index of person and remove (splice) it from the observable array
        self.people.splice(self.people.indexOf(person),1);
        self.selectedPerson(null);
    }
    self.removeSelected = function() {
        if (self.selectedPerson()) {
            self.delete(self.selectedPerson());
        }
    };
    self.unSelect = function() {
        self.selectedPerson(null);
    }
    return self;
};

var peopleModel = new PeopleModel(people);

ko.applyBindings(peopleModel);