The goal

Remove an item from an observableArray using KnockoutJS.

The problem

I do not know — nothing happens.

My markup:

<button data-bind="click: Summary.remove">
    <i class="icon-ok"></i>
</button>

My remove action:

self.remove = function (item) {
    self.products.remove(item);
};

My observableArray:

self.products = ko.observableArray();

What is happening?

Nothing. The self.remove function is triggering but nothing happens to the item.

More details?

I think that the details I've passed is enough, but if you need more, just let me know.

The goal

Remove an item from an observableArray using KnockoutJS.

The problem

I do not know — nothing happens.

My markup:

<button data-bind="click: Summary.remove">
    <i class="icon-ok"></i>
</button>

My remove action:

self.remove = function (item) {
    self.products.remove(item);
};

My observableArray:

self.products = ko.observableArray();

What is happening?

Nothing. The self.remove function is triggering but nothing happens to the item.

More details?

I think that the details I've passed is enough, but if you need more, just let me know.

• javascript
• knockout.js

Share Improve this question Follow asked Jul 5, 2013 at 19:04 Guilherme OderdengeGuilherme Oderdenge 5,01166 gold badges6666 silver badges9696 bronze badges 1

• There isn't enough information here. Please post a jsfiddle demonstrating the issue and I'll be glad to help. – Ryan Rahlf Commented Jul 5, 2013 at 19:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

assuming you are calling from inside a foreach binding, i believe you should be using the $parent context to call the remove function:

<button data-bind="click: $parent.remove">
    <i class="icon-ok"></i>
</button>

heres a sample fiddle for how I generally structure adding/removing items from a list:

http://jsfiddle/E53tc/

html

<ul data-bind="foreach: products"> 
    <li>
    <span data-bind="text: name"></span>
    <button data-bind="click: $parent.remove">Remove</button>
    </li>
</ul>
<button data-bind="click: add">Add New </button>

javscript

var product = function (data) {
    var self = this;

    self.name = ko.observable(data);
}

var vm = function () {
    var self = this;

    self.remove = function (item) {
        self.products.remove(item);
    };

    self.add = function () {
       self.products.push(new product("new product"));   
    }

    self.products = ko.observableArray();
}

var viewModel = new vm();
viewModel.products([ new product("product a"), new product("product b")]);
ko.applyBindings(viewModel);