如何使用点击功能删除对象中的数据？

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!

Answer 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?