Protractor: how to click all delete buttons in a page object

Question

I have a table with 3 rows of data and 3 delete buttons. I want to delete all rows of data and so am trying to write a method in my page object to do so... this should be a snap but I can't get it to work. I'm trying it like this:

this.rows = element.all(by.repeater('row in rows'));

this.deleteAllFriends = function() {
    this.rows.each(function(row) {
        row.$('i.icon-trash').click();
    })
};

But this throws an error:

Error: Index out of bound. Trying to access index:2, but locator: by.repeater("row in rows") only has 1 elements

So obviously, the index protractor expects next is no longer there, because it's been deleted. How can I work around this?

This also does not work and throws the same error:

this.deleteButtons = $$('i.icon-trash');

this.deleteAllFriends = function() {
    this.deleteButtons.each(function(button) {
        button.click();
    });
};

This also doesn't work...

this.deleteAllFriends = function() {
    while(this.deleteButton.isDisplayed()) {
        this.deleteButton.click();
    }
};

Answer 1

With today's version >= 1.3.0 of Protractor you are now be able to do this at once

$$('i.icon-trash').click();

feat(protractor): allow advanced features for ElementArrayFinder

Answer 2

I finally figured it out...

this.deleteButtons = $$('i.icon-trash'); // locator

this.deleteAllFriends = function() {
    var buttons = this.deleteButtons;

    buttons.count().then(function(count) {
        while(count > 0) {
            buttons.first().click();
            count--;
        }
    })
};