Deleting A Table Row

This example demos a delete button that removes a table row upon completion. A confirmation popup is specified at the tbody level, so all buttons share the same confirmation message.

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.

Explanation

  • Each row has a button with a ic-delete-from attribute set up to delete the row from the server
  • The table body has an ic-target set to closest tr and causes a confirmation message with an ic-confirm attribute. The delete buttons in the table inherit these attributes.
  • The server side returns an empty response, with the special header X-IC-Remove set to 1s, which tells intercooler to remove the target (in this case, the closest row) after 1 second, allowing for a CSS3 transition to fade the row out.

Demo

Name Email Status
Joe Smith joe@smith.org Active
Angie MacDowellangie@macdowell.orgActive
Fuqua Tarkentonfuqua@tarkenton.orgActive
Kim Yeekim@yee.orgInactive