JQuery draggable update array after delete

Question

I'm not sure of the best way to do this, I am certain that my JQuery is "clumsy" to say the least but it gets the first part of the job done.

I am dragging "products" to a basket like this:

$j('#basket').droppable({ 
accept: '.productsimg',
drop: function(ev, ui) { 
        $j(this).append(ui.draggable.clone());
        $j("#basket .deleteit").show();
        $j('#basket .instructions').hide();
        $j("#basket .quantityIndicator").show();
        $j("#basket").css("background-image","none");
        $j('#basket .productsimg').removeClass('productsimg');
        $j('#basket .attachment-100x100').css('width','50px');
        $j('#basket .attachment-100x100').css('height','50px');
        $j("#basket .hiddentitle").show();  
        var result = $j('#basket').sortable('toArray');

        alert(result);
        $j('#total').load('/wordpress/wp-content/plugins/shop/test.php');
      } 
});

Yes I am also "manipulating the CSS" after dropping. So far the only way I can "get" the dropped elements ID is to set basket as a sortable like this

$j('#basket').sortable({ 

});

By doing that I can use the "result" alert to see the arrayed ID's - that works, but I am sure it's not right. What doesn't work is when I remove a dropped item from the basket like this:

$j("#basket .deleteit").live('click',function(){
    $j(this).parent().remove();
    var test = $j('#basket').sortable('toArray');
    alert(test);
    var num = $j('#basket .deleteit').length
    if (num == 0) {
       $j('#basket .instructions').show();
       $j("#basket").css("background-image","url(/wordpress/wp-content/plugins/shop/img/cart.png)");
    }
});

What I actually want to happen is the basket array to update. But it doesn't. Any clues please. Thanks. - Oh and please try and keep it "simple" as I am "very simple" at JQuery

Answer 1

yours is

$j("#basket .deleteit").live('click',function(){ 
     $j(this).parent().remove(); 
     //....some codes..... 
 });

Have you tried,

$j("#basket .deleteit").live('click',function(){ 
    //.... ...some codes... .... 
    $j(this).parent().remove(); 
});

edit: based on your post's comment

var result = $("ul#someId li").map(function(){
   return this.id;
}).get();
// result is now an array containing the id's of li.

demo