JqueryUI Selectable - unselecting without Ctrl

Question

I am trying to make a selectable list with parent/child/grandchild indentations. Please see below:

http://jsfiddle.net/Lmsop4k7/

$('#theParentList').selectable({
    filter: 'li div',
    selected: function (event, ui) {
        var selectedText = $(ui.selected).text();
        $("#selectedNode").text(selectedText);

        if ($(ui.selected).hasClass('selectedfilter')) {
            $(ui.selected).removeClass('selectedfilter');
        }               
    }
});

But, I am having a lot of problems coming up with the "unselect" functionality (i.e. without having press down Ctrl). I also don't want to "bind" Ctrl automatically to mouse down (which is described in some other solutions), b/c I only want one item selected at one time. Also, I just want to understand how to do the control flow to unselect through the events (e.g. "selected:").

What am I doing wrong here? As you can see, the selection gets picked up correctly since the textbox gets updated correctly with the correct text. However, when I click an already clicked item to "unselect" (without holding down Ctrl), it doesn't unselect. I figure even in this situation, a "selected" event gets triggered - but clearly there is something wrong with my "selected:" code. Very frustrating..

Thanks everyone.

Answer 1

Try

// utilize `dblclick` event to remove selected class
$(".ui-selected").one("dblclick", function(e) {
    $(e.target).removeClass("ui-selected")
});

http://jsfiddle.net/Lmsop4k7/3/