CODEWITHSUNDEEP
javascriptknockout.js
user1104854
user1104854

Reputation: 2167

Deleting dynamically created rows in Knockout.js

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?

Upvotes: 0

Views: 101

Answers (2)

Michael Best
Michael Best

Reputation: 16688

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();
}

Upvotes: 2

Nathan Fisher
Nathan Fisher

Reputation: 7941

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]);
    }
});

Upvotes: 1

Related Questions