How do I delete data in an object with my click function?

Question

I'm putting together a list that I want to eventually turn into a martial arts "journal". I currently have a click function for my delete key that will remove the DOM element. However, I'm unsure of how to delete the data that is stored in the object

var curBelt = $('#belt').val();
//This is my data object that holds the array per belt
var data = {
    white: [],
    blue: [],
    purple: [],
    brown: [],
    black: [],
}
//This is my list
var $list = $('#todoList');

//This is a change function that take the value of the belt and runs the createListFromData function
//to reapply the svaed data in the array
$('#belt').change(function(){
    curBelt = $(this).val();
    createListFromData();
});
//This function adds the checkbox, itemtext, and the click function to cross off items
function addNewItem (itemKey, itemText) {
    var $listItem = $('<li>');
    var $span = $('<span>' + itemKey + ' - '+ itemText +'</span>');
    var $editButton = $('<button id = "editButton">Edit</button>')
    var $deleteButton = $('<button id = "deleteButton">Delete</button>')
    $listItem.append($span);
    $list.append($listItem);
    $list.append($editButton);
    $list.append($deleteButton);

    $deleteButton.click(function() {
        $listItem.remove();
        $editButton.remove();
        $deleteButton.remove();          
    });

}

var totalItems = 0;
var $inItemText  = $("#inItemText");
var $itemKey = $("#itemKey");
console.log($itemKey);
$itemKey.focus();
//This uses enter to push the text to my belt arrays and calls the    addsNewItem function to the list
$inItemText.on('keyup', function (event) {
    if (event.which === 13) {
        totalItems++;

        var inputObject = {};
        var itemText = $(this).val();
        var itemKey = $itemKey.val();

        if (!itemText || itemText === "") {
            return false;
        }
        inputObject.move = itemKey;
        inputObject.note = itemText;

        data[curBelt].push(inputObject);
        console.log(data);

        addNewItem(itemKey, itemText);

        $(this).val('');
        $itemKey.val('');
        inItemText.focus();
    }
});

//This empties the list and reapplies the arrays in the data object
var createListFromData = function () {  
    $list.empty();
    data[curBelt].forEach(function (object) {
        addNewItem (object.move, object.note);
    });
}
createListFromData();

Any help is appreciated!

score 1 · Answer 1 · answered Feb 27 '15 at 18:56

1

First thing is I would do is to move totalItems++; down to after

if (!itemText || itemText === "") { return false; }

This will prevent you from adding to the total if its a blank element. I'm also not sure why you would have your delete click event initialized in your addNewItem function. Do you mind making a jsfiddle or codepen to review?

answered Feb 27 '15 at 18:56

Brendan Martin

376
4
13

Hey Shawn, don't know if you figured this out yet. What you'll want to do is use the click event to find the appropriate inputObject in the data object. You could try adding the belt type to the DOM. Then you can do data[belt].move.remove() or something similar. Edit: Check this out http://stackoverflow.com/questions/208105/how-to-remove-a-property-from-a-javascript-object – Brendan Martin Mar 02 '15 at 18:36

How do I delete data in an object with my click function?

1 Answers1