Problems deleting a Meteor.js collection using template event listeners

Question

I am relatively new to Meteor, and having some difficulties figuring this out, so perhaps someone can be kind enough to let me know what I am doing wrong. I've created a list of items in a Meteor (mongo) collection available to client/server. I'd like to delete the item that I have showing up next to the delete button. I've done this so far. The first portion where I enter the data works fine, and the template List does show all my data:

In my html file (client/list.html)

<template name=List>
  <table class="table">
    <tr>
      <td>Item</td>
      <td>Description</td>
    </tr>
    <tr>
      <td>{{itemName}}</td>
      <td>{{description}}</td>
      <button class="btn" id="delete" type="submit">Delete</button>
    </tr>
</template>

On the js file (client/list.js)

Template.quickList.events({
  'click #delete': function(e, t){
    cl = Lists.findOne(t.data);
    Lists.remove({_id: cl._id});
  }
});

Note: I get a null value in the events listener (in the list.js file) if I try console.log(t.data)

Not sure where to go from here.

Answer 1

Events handled by a template's event map will have the template's data context available in the this keyword. If your item is the data context (and it likely is if you are getting itemName and description without helpers), you can just use this._id in the event handler.

<tr>
  <td>{{itemName}}</td>
  <td>{{description}}</td>
  <button class="btn" id="delete" type="submit">Delete</button>
</tr>

With the event:

Template.quickList.events({
  'click #delete': function(event){
    Lists.remove(this._id);
  }
});