Knockout.js - cannot remove mapped object from observable array -

i've been using knockout while in new app, until manually creating objects map complex objects (and nested children). learned of mapping plugin, , started using that. can map objects, , add computed observables etc no problems, can't remove them observable array when pass ui. remove iterates on array, never finds (unedited) object remove. likewise unable return of true using == , === comparisons returned object , specifying [0] location of array containing 1 object. presume causing not remove, though think should same?

$(document).ready(function () {     var viewmodel = new appviewmodel();      $.ajax({         type: "get",         url: "/api/players",     }).done(function (data) {         viewmodel.playerscollection(ko.mapping.fromjs(data));     }).error(function (ex) {         console.log("error retrieving players");     });      ko.applybindings(viewmodel);     });     

viewmodel

var appviewmodel = function () {     var self = this;     this.playerscollection = ko.observablearray();      this.confirmdeleteplayer = function (currentdata) {         self.playerscollection.remove(currentdata);     }; }; 

ui

<div data-bind="foreach: playerscollection()">     <div>         <span data-bind="text:player.firstname"></span>         <span data-bind="click: $root.confirmdeleteplayer">            <img src="delete-icon.png" />         </span>     </div> </div> 

what doing wrong here?

change code from:

viewmodel.playerscollection(ko.mapping.fromjs(data)); 

to:

viewmodel.playerscollection = ko.mapping.fromjs(data); 

or:

viewmodel.playerscollection(data); 

playerscollection observable array, when call mapping plugin, turns data observable array. you're adding observable array observable array. think that's causing weird issues.

see: http://plnkr.co/edit/sywsq3dewf2sdsqj5s5b?p=preview