knockout.js - knockout foreach beforeRemove animate anomaly : animate SOMETIMES applied to adjacent identical div -

here fiddle: http://jsfiddle.net/7z7kp/8/

the animation gets applied wrong card whenever 2 cards of same suit adjacent. why? cannot find error, if i've made one.

   self.animateremove = function(element,index,value){              $(element).parent().find("div").eq(index).animate(                  { height: 1, width: 1 }, 444,                      function () {                         $(this).remove();                     });         }; 

your problem using primitive types (string) in hand ko.observablearray , ko cannot detect item removed when have clicked on card because have same cards multiple times in array. ko chooses last one.

to solve problem need use objects in hand array instead of plain strings:

so modify addcard:

self.addcard = function(data,event){         var imgbutton= $(event.currenttarget);               self.hand.push( { suit: imgbutton.data("suit") } );             }; 

and view:

<div id="hand-container" data-bind="foreach: {data: hand,       afteradd: afteradd, beforeremove: animateremove}">     <div data-bind="text: suit"></div> </div> 

demo jsfiddle.