How to upgrade/refresh the ag-grid after row delete?

For better performance, use grid api calls to add/remove rows.
To insert a row at the beginning, that is copy of a selected row:

var rowData = JSON.parse(JSON.stringify(selectedNode.data));
gridOptions.api.insertItemsAtIndex(0, [rowData]);

To remove a selected row:

var selectedNodes = gridOptions.api.getSelectedNodes();
gridOptions.api.removeItems(selectedNodes);

Please insert new row only after a deep copy of original row.
Otherwise, api continues to refer to the same row.
So, the subsequent remove of new row, will remove original row from grid.

Please refer documentation for api details.
https://www.ag-grid.com/javascript-grid-insert-remove/

Edit: This solution is for version 3.3.x (updated plnkr link)

You should set the rows into the grid again: after your splice:

gridOptions.api.setRowData(gridOptions.rowData)

Maybe this plunkr helps https://plnkr.co/plunk/0k4sYa

The author of ag-grid explains this in the ag-grid forum The forum no longer exist

There is a more efficient way described in the documentation : Transaction Update API.

You must use the method api.applyTransaction after the rows are deleted :

gridOptions.api.applyTransaction({ remove: [array of rows you have deleted]});

For example with just one row deleted :

gridOptions.api.applyTransaction({ remove: [this.rowData[i]]})

With this method, the grid will just update the rows in parameters and keeps all other view states (order, ...).

To complete the answer, there are also parameters to update the grid when adding or modifying one or more lines.

When adding :

gridOptions.api.applyTransaction({ add: [array of rows you have added]});

When modifying :

gridOptions.api.applyTransaction({ update: [array of rows you have changed]});

Remarks : for older versions of AG Grid the method was api.updateRowData instead of api.applyTransaction