Question

Using Meteor, I am trying to loop through and display a list of notes from a database with an option to delete each note.

Here is the HTML (using Handlebars.js)

<template name="Notes">
    {{#each NoteArr}}
        <div class="Note">
            <h2>{{Title}}</h2>
            <p>{{Body}}</p>
            <span class="deleteNote">Delete</span>
        </div>
    {{/each}}
</template>

And here is the client Javascript

Template.Notes.events = {
    "click .deleteNote" : function(){
        noteID = $('.deleteNote').parent().attr("id");
        Notes.remove({ID:noteID});
    }
};

This grabs the first instance of .deleteNote, so unless I’m trying to delete the first one, that won’t help. How can I grab the parent of the particular instance of .deleteNote that was clicked, not just the first one it finds?

Answer 1

The reason why the first element is deleted is.. in your .click event, you are accesssing the div directly as $('.deleteNote').parent() which grabs the first node in the html which has a class .deleteNode.

Now to remove the specific notes, from the collection: Every document in the collection has a unique _id attribute which is generated automatically. assign that unique _id of the document to the span element as <span id= "{{_id}}" class="deleteNote">Delete</span>.

So the cilck event will look like:

 Template.Notes.events = {
    "click .deleteNote" : function(e){
        var noteID = e.currentTarget.id;
        Notes.remove({_id:noteID});
        }
   };

And the template will look like:

<template name="Notes">
    {{#each NoteArr}}
        <div class="Note">
            <h2>{{Title}}</h2>
            <p>{{Body}}</p>
            <span id= "{{_id}}" class="deleteNote">Delete</span>
        </div>
    {{/each}}
</template>

Untested code, but hope this will help solving your issue.