Question

I’m trying to get it so that when a user clicks Delete Record for each individual, and hits the confirm prompt it actually deletes the individual record from local storage. It appears my clear local storage one works, but not the delete individual one.

Answer 1

I think you overcomplicated event handlers, why use $(document).delegate('#clearSData', 'click', instead of just #clearData'.click() ?
Also, whatis this.key ? I think this is this of the button, it not related to storage.
All works fine in my sample:

http://jsfiddle.net/oceog/7Lawq/3/

HTML:

<button id="delete">Delete</button>
<button id="add">Add</button>
<div id="out"></div>​
​

JS:

var show = function() {
    var out = $('#out'); //.children().remove();
    console.log(out.children());
    out.children().remove();
    out.html('');
    //debugger;
    for (var i in localStorage) {
        var newline = $('<div>').text(i + ':' + localStorage.getItem(i)).data('i', i);
        out.append(newline);
        newline.click(function() {
            var that = $(this);
            var i = that.data('i')
            $('<div>').simpledialog2({
                mode: 'button',
                headerText: 'Warning',
                headerClose: true,
                buttonPrompt: 'Delete Running Record? Cannot be undone!' + '<div>' + i + ':' + localStorage.getItem(i) + '</div>',
                buttons: {
                    'OK': {
                        click: function() {
                            localStorage.removeItem(i);
                            show();
                        }
                    },
                    'Cancel': {
                        click: function() {
                            cancelDialog2(this);
                        },
                        icon: "delete",
                        theme: "b"
                    }
                }
            });

        });
    }
};


$('#add').click(function() {
    var
    key = (Math.random() * 10000000000 + '').replace(/\..*$/, ''),
        value = (Math.random() * 100000000000 + '').replace(/\..*$/, '');
    localStorage.setItem(key, value);
    show();
});
$('#delete').click(function() {
    for (var i in localStorage) {
        localStorage.removeItem(i);
        show();
        break;
    }
});
$('#dialogb').click(function() {
    $('#dialog').dialog();
});
show();

function cancelDialog2(el) {
    var self = el;
    $('<div>').simpledialog2({
        mode: 'blank',
        headerText: 'Info',
        headerClose: true,
        blankContent: "<ul><li>Running records have not been touched.</li></ul>" +
        // NOTE: the use of rel="close" causes this button to close the dialog.
        "<a rel='close' data-role='button' href='#'>Close</a>"
    })
}​

CSS:

  #out div:hover {
 background-color: red;
 color: blue;    
}

---

So, add data('key',key) to button and use that data inside your dialog button click closure.