Delete object from parse.com using Handlebars.js

Question

What I have is two inputs for the user to enter in a first name and last name which gets saved to the database. Next using Handlebars.js I looped through the objects in the database to create a list of all "contacts" and added a button that when clicked should delete that contact.

The problem is I cant delete the object. Below is the code i have used so far.

<script id="template" type="text/x-handlebars-template">
<table>
<tr>

<td>
<input value={{FirstName}}></input>
</td>
<td>
<input id="EditLname" value={{LastName}}></input>
</td>
<td>
<button id=del>delete</button>
</td>

</tr>
</table>
</script>

the rest of the important code below.

$(window).load(function () {
        var Contact = Parse.Object.extend("Contact");
        var query = new Parse.Query(Contact);
        query.equalTo("objectId");
        query.find({
            success: function (results) {

                for (i = 0; i < results.length; i++) {
                    var data = ({
                        FirstName: results[i].attributes.FirstName,
                        LastName: results[i].attributes.LastName
                    });
                    var template = Handlebars.compile($('#template').html());

                    var html = template(results);

                    $("#main").append(template(data));
                }
            },
            error: function (error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });

        $(document).on("click", "#del", function () {
            myObject.destroy({
                success: function (myObject) {
                    // The object was deleted from the Parse Cloud.
                },
                error: function (myObject, error) {
                    // The delete failed.
                    // error is a Parse.Error with an error code and description.
                }
            });
        });
    });

the above gives "Uncaught ReferenceError: myObject is not defined" in the console log. But I have that code to show my thought pattern more than anything.

Just in case anyone is unsure, what I want is when the button beside john smith is clicked "john smith" will be dropped/ deleted from the database.

EDIT: Basically I want to get This working with Handlebars.

EDIT: This Question asked on Parse.com

Answer 1

I got it by finding the objectId of the object that i set to the "value" of the button.

Handlebars template

<script id="template" type="text/x-handlebars-template">
<table>
<tr>
<td>
<input id="EditName" value={{FirstName}}></input>
</td>
<td>
<input id="EditLname" value={{LastName}}></input>
</td>
<td>
<button id="del" value="{{objId}}">Delete</button>
</td>
</tr>
</table>
</script>

Populates the template and sets the "value" of the button

$(window).load(function () {
        var Contact = Parse.Object.extend("Contact");
        var query = new Parse.Query(Contact);
        query.equalTo("objectId");
        query.find({
            success: function (results) {

                for (i = 0; i < results.length; i++) {
                    var data = ({
                        FirstName: results[i].attributes.FirstName,
                        LastName: results[i].attributes.LastName,
                        objId: results[i].id
                    });
                    var template = Handlebars.compile($('#template').html());

                    var html = template(results);

                    $("#main").append(template(data));
                }
            },
            error: function (error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });

and finally the code for when the delete button is clicked.

$(document).on("click", "#del", function () {

            var delObject = $(this).attr("value");

            var query = new Parse.Query(Contact);
            query.get(delObject, {
                success: function (delObj) {
                    // The object was retrieved successfully.
                    delObj.destroy({});
                    window.location = "index.html";
                },
                error: function (object, error) {
                    // The object was not retrieved successfully.
                    // error is a Parse.Error with an error code and description.
                    alert("Error: " + error.code + " " + error.message);
                }
            });

        });