Removing Items from Jquery UI Sortable

Question

I'm trying to find out the correct way to remove items from a JQuery UI Sortable list. I've created a JSfiddle illustrating my problem.

Basically, I have a couple of callbacks around a JQuery UI sortable widget, and I want these callbacks to be executed as soon as I remove an element from the widget. What's the correct way to do so? Because "$.remove" nor "$.detach" seems to work.

EDIT 1: I'm not looking for a hotfix on my problem but more of an explanation of how the JQuery UI Sortable list works, while the answers below clearly solve the problem. I don't think it's a clean way of doing it. I think that JQuery UI Sortable should be aware that when you remove an element from the list that's between two elements you should be needing a re-sort

If you take note below the function does not gets executed when I call remove on an element.

$(document).ready(function(){
    $('ul').sortable({
        stop: function(event, ui) {
            updatePosition();
        }
    });

    $('.remove').on('click', function(e){
        $(".delete").remove();
    });
});

function updatePosition(){
    $('ul li').each(function(i){
        $(this).html(i + 1);
    });
}

http://jsfiddle.net/72RTz/2/

score 4 · Accepted Answer · edited May 23 '17 at 12:25

In your remove event handler, simply include a call to updatePosition after $(".delete").remove(); This won't cover any-and-all times elements are removed from your list: if that's truly your intent then you'll have to go with something like @pmich35's answer (though it does mean updatePosition will be called for every $.remove call, to any element in your list or not, from then on - a bit overkill)

Your updated fiddle.

EDIT: There is currently no "remove" event in $.sortable that suits your purpose - the remove event that is there only covers the specific case of your user dragging a list item from your list to another sortable list. Sortable doesn't actually keep track of your list items at all times - it doesn't care if you programmaticly add or remove items - it only facilitates user drag events. It doesn't actually perform any "sorting" as it were, and all appearances of sorting are just the way jQuery pulls DOM elements to form it's objects (if you cache the list items in a jQuery object, then drag-sort the items, the cache'd list items' order will be the same as before). Since the 'sorting' is just an illusion of the function, it "can't" actively track appends/removes.

There is another possible workaround: attach updatePosition to the ul element itself:

$( 'ul' ).on( 'remove', 'li', updatePosition );

Which also accomplish your goal, but still isn't the "clean" way you're desiring. The 'remove' event on general elements was added in jQuery UI 1.10.3 (so jsfiddle won't cover it, they only go up to 1.9.2), and will call updatePosition whenever any current or future list item is removed (from the DOM - dragged removals are still caught by $.sortable's remove event).

score 1 · Answer 2 · answered Oct 23 '13 at 22:37

1

you can override the remove function, althougth it is not very optimized:

(function(){
    oldRemove = jQuery.fn.remove;
    jQuery.fn.remove=function(){
        oldRemove.apply(this, arguments);
        updatePosition();    
    }
})();

$(document).ready(function(){
    $('ul').sortable({
        stop: function(event, ui) {
            updatePosition();
        }
    });


    $('.remove').on('click', function(e){
        $(".delete").remove();
    });


});

function updatePosition(){
    $('ul li').each(function(i){
        $(this).html(i + 1);
    });
}

answered Oct 23 '13 at 22:37

Pierre Michard

1,341
1
12
16

While this feels a lot cleaner. I feel that this is not why I should be doing. JQuery UI Sortable should be aware of when a sortable element is removed? Perhaps this is missing in the library and a pull request with this is what should be done? @pmich35 – Gotjosh Oct 24 '13 at 13:32
in fact that solution is not the cleanest one, binding on a remove event is discussed here: http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom the solutions proposed there are way cleaner than mine. To respond to your question, Idon't think that removing an element should trigger the sortable callback since the ordering of the objects remain rigth when removing an object. – Pierre Michard Oct 24 '13 at 14:00
I have updated my question with that I'm currently looking for. – Gotjosh Oct 24 '13 at 14:58

Removing Items from Jquery UI Sortable

2 Answers2

Linked