I am following the meteor tutorial, and along with adding a form to add a task, I made a form to delete a task by its text value as well.
Template.body.events({
"submit .new-task": function (event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
var text = event.target.text.value;
// Insert a task into the collection
Tasks.insert({
text: text,
createdAt: new Date() // current time
});
// Clear form
event.target.text.value = "";
},
"submit .delete-task": function (event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
var text = event.target.text.value;
// Insert a task into the collection
Tasks.remove({
text: text,
});
// Clear form
event.target.text.value = "";
}
});
}
The new-task
form works fine, but the delete-task
form doesn't work. I tried a similar query using shell (meteor mongo
) and it worked. What error do I have here?
EDIT: Here's the html as well:
<head>
<title>Todo List</title>
</head>
<body>
<div class="container">
<header>
<h1>Todo List</h1>
<form class="new-task">
<h2> Add a task </h2>
<input type="text" name="text" placeholder="Type to add new tasks" />
</form>
<form class="delete-task">
<h2> Delete a task </h2>
<input type="text" name="text" placeholder="Type to delete tasks" />
</form>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox" checked="{{checked}}" class="toggle-checked" />
<span class="text">{{text}}</span>
</li>
</template>