Stack Exchange
Jquery ui Selectable() cant properly unselect outside the method
I have a table with selectable objects as follow : 
/* ESPACE OU LES TATOUAGES SONT SELECTABLE */
$(".tatooInk > tbody").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable();
 $( ".tatooInk > tbody" ).selectable({
        filter: ":not(td, img ,b,span,div)",
        /* Quand on select un tatoo */
        selected: function( e, ui ) {
                if(tatoos.length < 28){
                    // JSON.stringify(ui.selected);
                    console.log($( ui.selected ).html());
                    $( ui.selected ).addClass( "ui-state-highlight" );
                    getAllTats( $(ui.selected) );
                    updateCode();
                }
                else{
                    alert('trop de tatouages');
                    $(ui.selecting).removeClass("ui-selecting");
                }
            },
        unselected: function( e, ui ) {

                $( ui.unselected ).removeClass( "ui-state-highlight" );
                removeTat( $(ui.unselected) );
                updateCode();
            }
     });

This code works great, when i select an item in my list it looks like this : 
At another place in my code, i do some modification depending what has been selected
At another, another, place in my code, if the conditions are meeted i unselect manually using this code 
function TabletatooDel(url){
    $('.tatooInk tr').each(function(){
        var lien = $(this).children(':nth-child(1)').children().attr('src');
        if(lien == url){
            $(this).removeClass('ui-selected ui-state-highlight');
            $(this).trigger('unselecting');
            $(this).trigger('unselected');

        }
    });
}

When passing through that, this is what i think happens : 

Even if i removed every Class, when i click on the previously unselected element, even if it goes like this again 
The modifications depending on my select DOESNT run. 
I have to unselect it again, by clicking on it, and reselect it again in order to have the modifications running. 
Any idea how to properly unselect out of the method ? 

Can you make fiddle for this?

http://codepen.io/anon/pen/KVdXKN
You click on a tatoo, then it appears above, you can drag it into the bin just above, and it disapears.
Then if you want that one tatoo again, you have to click 2 times in order to see him again in the preview

... It's ok ! I found my problem. I forgot to erase the tatoo out of a json list containing them all. 
It looks like this now : 
for(var i=0; i< tatoos.length; i++){

                if(tatoos[i].url === url ){
                    tatoos.splice(i, 1);
                }
            }
            $(this).removeClass('ui-state-highlight');
            $(this).removeClass('ui-selected');
            $(this).children(':nth-child(4)').removeClass( "tatooSelect" );

