Ember.js : Remove row from datatable component after delete

I have a component that contains a Datatable, this component send an action 'deleteItem' to the Controller in order to delete a specific item by its Id.

The problem is that when I delete an Item from the store the view isn't updated, So my question is how can I refresh the Datatable and show the updated data after a Delete ?

Controller.js

deleteItem(id){
   var store = this.get("store");
   store.findRecord('foo', id, {backgroundReload: false}).then(function(foo){

                  foo.deleteRecord();
                  foo.save().then(
                    () => {
                      console.log(`Done !`);
                    },

                    (err) => {
                      console.log(err);
                    })}

// foo-component.hbs

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Title</th>
      <th>Decription</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    
  </tbody>
</table>

//foo-component.js

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement() {

    this.$('table').DataTable({
      dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
      language: {
        search: '<span>Filter:</span> _INPUT_',
        lengthMenu: '<span>Show:</span> _MENU_',
        manualRowMove: true,
        paginate: {
          'first': 'First',
          'last': 'Last',
          'next': '→',
          'previous': '←'
        }
      }
    });

    this.$('select').select2({
      minimumResultsForSearch: Infinity,
      width: 'auto'
    });
  },

  actions: {
     deleteItem: function(id) {
      this.sendAction("deleteItem", id);
    }
  }
});