Delete a record from index page

I'm new to ember and trying to build a very simple app as a learning exercise in 2.4. I have a list of tasks that appear on the index page. And I've attached actions to each one to delete. And have one form row on the bottom of the page with an action to saveTask.

I have one index controller. No defined index routes. One model for tasks at app/models/task.js

My function to saveTask is working. But I can't get the deleteTask to work. I know I'm not passing the object I want to delete correctly. The error returned is that Uncaught TypeError: undefined is not a function index.js:26 deleteTask.

Can someone explain the correct syntax to me?

 app/templates/index.hbs
{{#each model as |task| }}
    <div class="form-horizontal form-group row">
        <div class="col-xs-4 col-md-3">
            {{input type="text" value=task.taskname class="form-control"}}
        </div>
        <div class="col-xs-3 col-md-2">
            {{input type="text" value=task.startdate class="form-control"}}
        </div>
        <div class="col-xs-3 col-md-2">
            {{input type="text" value=task.enddate class="form-control"}}
        </div>
        <div class="col-xs-3 col-md-2">
            {{input type="text" value=task.duration class="form-control"}}
        </div>
        <div class="col-xs-3 col-md-2">
            {{input type="text" value=task.banding class="form-control"}}
        </div>
        <div class="col-xs-2 col-md-1">
            <button type="button" class="btn btn-default btn-sm" aria-label="Remove task" {{action 'deleteTask' task}}>
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
        </div>
    </div>
{{/each}}

and the controller

app/controllers/index.js
import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {

        deleteTask(task) {
        this.destroyRecord();
        this.transitionTo('index');
    }
  }
});