.row(index).remove() not working as expected

I subscribed an array to add/delete events, so that the data table mirrors the operations visually.
The events trigger as expected, when I add/remove an item on the array, the code executes but the rows remain.

Example:

self.arrayItems.subscribe(function (changes) {
        for (var i = 0; i < changes.length; i++) {
            var item = changes[i];
            switch (item.status) {
                case "deleted":
                    var rowIdx = dt.column(1).data().indexOf(item.value.Id);
                    dt.row(rowIdx).remove();
                    break;
                case "added":
                    dt.row.add(item.value);
                    break;
            }
        }
        dt.draw(); // calling draw after for-loop
    }, null, "arrayChange");

Note: the "Add" function seems to work - on load, I get all items in the table and it shows up great, but they never get removed... I tried calling draw at the individual operation (i.e. dt.row(rowIdx).remove().draw(); and also tried to call invalidate().draw(); but no changes... also I tried to call dt.rows().invalidate().draw(); at the end of the for-loop with no luck.

Through debugging I verified that 'rowIdx' is in fact the row index I wish to remove, and dt.row(rowIdx).data() is the object being removed. Still the row remains after draw/redraw.

The workaround I found is to call dt.clear().draw() to completely remove all table rows, but then I have to re-load them all back in - I just want to remove one single row, and if I clear the array, it should be removing all the items through the delete change event - there's something I'm doing wrong here and I can't figure out why the rows aren't being removed.