How do I delete an element from an array and store that array back into chrome.storage.local?

Question

Im building a chrome extension that lets you save/store links. I store them in an array which is saved inside the chrome local storage.

Users also have the ability to delete a certain item thats stored, using a delete button that is next to their link.

The issue is that the last element of the list is always deleted no matter which item the user deletes.

$("ul").on("click", ".removeButton", function() {
    chrome.storage.local.get({bookmarks: []}, function(data) {
        var bookmarks = data.bookmarks;
        bookmarks.splice($(this).parent().index(), 1);
        chrome.storage.local.set({ bookmarks: bookmarks}, function() {
            chrome.storage.local.get('bookmarks', function(data) {
                console.log(data.bookmarks)
            })
        });
    })
    $(this).parent().remove();
})