Item removed from Knockout observable array, but not from html table

Question

I have a plunk that demonstrates my issue: http://plnkr.co/edit/PzBrcTX0Vnn01xWy4dk6

This is a table that has a list of \"settings\". It uses Footable so the list c

Answer 1

The issue comes from the empty text nodes that surround each element. The foreach binding also tracks those text nodes. See https://github.com/knockout/knockout/pull/709 for a discussion about why it's not possible to just ignore them as a general rule. On the other hand, your custom binding can strip them out.

See how knockout-sortable does this (for similar reasons):

var nodes = Array.prototype.slice.call(element.childNodes, 0);
ko.utils.arrayForEach(nodes, function(node) {
    if (node && node.nodeType !== 1) {
        node.parentNode.removeChild(node);
    }
});

You need to make sure this is run before foreach. I modified your binding to do that: http://plnkr.co/edit/hS6Gb2xLfabSj9K8l03y?p=preview