Deleting dynamically created rows in Knockout.js

Question

I'm using knockout.js 2.3.0 and I have a table with dynamically added rows and select lists in each of these rows. Upon changing a date input, the select lists populate with different content. Because different dates will populate the lists with different content, I want to remove any previously added rows because the content may not be accurate.

The issue I'm having is that not all of the rows are being removed. Ex: If I have more than 4 rows, there will always be 2 remaining. The only time all rows are cleared is when there is only 1 row to start with.

Here's the subscribed function for deleting the rows

 self.date.subscribe(function() {

    //I also tried setting the loop length to a very long number but the same results happened each time
    for (i = 0; i < self.customers().length; i++){
       self.customers.remove(self.customers()[i]);
    }

    //now populate the select list and add an empty row - commented out for testing to make sure rows are being deleted
    //setCustomerList(self.date());
    //self.customers.push(new AddCustomer(self.customerList[0]));
}); 

I was just testing to see what would happen, and the only way I've gotten all of the rows to remove is by adding multiple for loops which obviously isn't desirable.

Is there a simpler way to remove all dynamically added rows?

Answer 1

If you want to remove all the items in an observable array, use the removeAll method:

self.customers.removeAll();

If you really want to use a loop, you could do so by continuously removing the last (or first) item until there are none left:

while (self.customers().length) {
   self.customers.pop();
}

Answer 2

I think you need to reverse the for loop and remove the items from the bottom up. the problem with your code is that the each time an item is removed the length of the array changes.

self.date.subscribe(function() {
    var customerLength = self.customers().length
    for (i = customerLength ; i >= 0; i = i - 1){
       self.customers.remove(self.customers()[i]);
    }
});