Knockout - Deleting item from ViewModel doesn't remove from DOM

Question

I have a view model which contains a collection of objects, 'Files'. Obviously this is bound to the DOM. When I remove an item from the 'Files' collection I would expect the DOM to be updated to reflect this, but it doesn't update. This is the JS that I use for removing an item from the 'Files' collection. ``` this.Delete = function(id) { for (var f = 0; f < this.Files.length; f++) { if (this.Files[f].ID() == id) { this.Files.splice(f, 1); } } }.bind(this); ``` If I print the length of the collection to the console after calling Delete(id), I can see that an item has been removed. So why does the DOM not update? If I call ko.applyBindings(... then it does update, but my understanding is that I shouldn't have to call this every time the view model updates. So what might I be doing wrong? Also, I've tried it with Files as an observableArray and a standard array, without any difference. UPDATE: here's the definition of the view model (well... the relevant part, anyway) ``` function Files…

Accepted Answer

You need to have the observable array:

```
self.Files = ko.observableArray([]);
```

but you need to call `splice` directly on the observable array with `this.Files.splice`:

```
this.Delete = function(id) {
    // find which index the specified ID exists at
    for (var f = 0; f < this.Files().length; f++) {
        if (this.Files()[f].ID() == id) {
            this.Files.splice(f, 1);
        }
    }
}.bind(this);
```

otherwise you remove the item form the underlying array without KO knowing about the removal so it cannot update the DOM. See also the documenation Manipulating an observableArray section.

By the way the observableArray has a `remove` function which could greatly simplify your code:

```
this.Delete = function(id) {
    this.Files.remove(function(item) { return item.ID() == id; } );        
}.bind(this);
```

Knockout - Deleting item from ViewModel doesn't remove from DOM

Solution

Problem