Meteor remove function doesn't work on a Collection

Question

I'm practicing with Meteor and I can't understand why the remove function of a MongoDB collection doesn't work. This is my html template where I created a button to remove the news:

<template name="news">
  <h2>News</h2>
  <form>
    <input type="text" name="title" placeholder="Add some news">
    <button>Add</button>
  </form>
  <ul>
  {{#each News in showNews}}
  <li>{{News.title}}<button class="removeAction">&times;</button></li>
  {{/each}}
</ul>
</template>

And this is my client.js file where I created the event to execute the remove function:

Template.news.events({
  'submit form': function(e) {
    e.preventDefault();
    var title = e.target.title.value;
    News.insert({ title: title, createdAt: new Date() });

    e.target.title.value = "";
  },
  'click .removeAction': function(e, a) {
    News.remove(this._id);
  }
});

I can't really understand why it doesn't work, I tried a lot of changes but nothing worked, when I click the "X" button nothing is happening.

Answer 1

Most probably the issue is that this._id is not defined. I think you are not using blaze the correct way. I'm not a blaze user but I think this will work.

<template name="news">
  <h2>News</h2>

  <form>
    <input type="text" name="title" placeholder="Add some news">
    <button>Add</button>
  </form>

  <ul>
  {{#each showNews}}
    {{> newsPost}}
  {{/each}}
  </ul>
</template>

<template name="newsPost">
  <li>{{title}}<button class="removeAction">&times;</button></li>
</template>

And your removeAction event listener should look like this.

Template.newsPost.events({
  'click .removeAction': function(e, a) {
    News.remove(this._id);
  }
});