http://stackoverflow.com/questions/42172685/remove-self-from-observablearray-in-knockout

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div data-bind="foreach: users">
    <span data-bind="text: name"></span>
    <a href="javascript:void(0)" data-bind="click: remove">Remove</a>
    <br />
</div>

JavaScript

var ViewModel = function(data)
{
		var self = this;
    this.users = ko.mapping.fromJS(data,
        {
            create: function(opts) {
            	var model = new UserModel(opts.data);
              model.isRemoved.subscribe(function(value){
              	if(value) self.itemRemoved(model);
              });
              return model;
            }
        });
        
    this.itemRemoved = function(item){
    	self.users.remove(item);
    }
        
}


var UserModel = function(data)
{
    ko.mapping.fromJS(data, {}, this);
    
    this.isRemoved = ko.observable(false);

    this.remove = function(user)
    {
        $.ajax({
            type: 'DELETE',
            url: '/echo/json',
            data: ko.mapping.toJSON(this),
            contentType: 'application/json',
            context: this,
            success: function(data)
            {
                // How to remove from array?
                //this.parent.users.remove(this); // ?
                this.isRemoved(true);
            },
        });
    };
}

ko.applyBindings(new ViewModel([{name: 'tom'}, {name: 'bob'}, {name: 'sam'}, {name: 'joe'}]));