Delete a record in Ember data not working

i have a table and i have a delete button in each row and when clicked the delete button the specific row should be deleted. The table is a component. Tried the following code.

MyComponent.js

  import Ember from 'ember';

   export default Ember.Component.extend({
   actions:{
    deleteCartRecord(cartDetails){
        debugger;
        this.sendAction('deleteRecords',cartDetails);
    }
 }

});

In MyComponent.hbs calling the action as follows

<button type="button" class="btn btn-danger" >Delete</button>

My Controller

   import Ember from 'ember';
   export default Ember.Controller.extend({
     actions:{
        deleteRecords(data){
          debugger; 
            let confirmation = confirm("are you sure to delete");
            if(confirmation)
            {
               debugger;
               data.deleteRecord();
               data.save();

            }
       }
  }
});

The template file in which component is called

    <hr>
</div>

<div class="col-lg-12 col-md-12">
    <div class="checkout-summery-wrapper">
        <div class="total-label">Total</div>
        <div class="total"></div>
        <!--<div class="tax-text">( Inclusive of all taxes )</div>-->
        <div class="place-order-button"><button type="button" class="btn siemens-btn">Place Order</button></div>
    </div>
</div>

<div class="col-lg-12 col-md-12">
    
    <div class="panel panel-default card-list-panel">
        <div class="panel-heading-cart col-lg-12 col-md-12">
            <div class="col-lg-11 col-md-11 heading">Generic Parts</div>
            <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div>
        </div>
        <div class="panel-body">
            
        </div>
    </div>
    
    
    <div class="panel panel-default card-list-panel">
        <div class="panel-heading-cart col-lg-12 col-md-12">
            <div class="col-lg-11 col-md-11 heading">Hot Gas Path</div>
            <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div>
        </div>
        <div class="panel-body">
            
        </div>
    </div>
    
</div>

I have the following problems

1. In MyComponent.hbs newCart is passed as a parameter will this delete all the record or the specific record i want?
2. MyController is not invoked from the component why is that?
3. Is this the correct way of deleting record in ember?

Thank you in advance