CODEWITHSUNDEEP
meteorhandlebars.js
Alex Getty
Alex Getty

Reputation: 1727

Meteor - Select Parent ID of element clicked

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?

Upvotes: 1

Views: 2445

Answers (2)

EzraM
EzraM

Reputation: 139

The _id of a note is stored in 'this' as well. In addition, the remove function accepts '_id' as a string. So this should work as well:

Template.Notes.events = {
  'click .deleteNote': function(){ return Notes.remove(this._id)}
}

A few benefits here. Less querying the DOM for information. Less jQuery. Fewer lines of code to think about. Cleaner templates.

Upvotes: 4

sohel khalifa
sohel khalifa

Reputation: 5578

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.

Upvotes: 4

Related Questions