jQuery UI: Removing class on the change event (nestedSortable plugin)

Question

I'm using Manuele Sarfatti's nestedSortable (http://mjsarfatti.com/sandbox/nestedSortable/) to create a storable and nested list. I've taken the script one step further by making my list collapsible via additional jQuery (I didn't modify the original plugin script). I wanted to display open and closed arrow icons to the list items to indicate when they are in their collapsed and expanded state. I almost have this working except I cannot seem to remove the arrow icon when a parent no longer has children. To create the arrow icon, I add the class 'ArrowOpen' to any parent that has children and use the jQuery UI change event to remove all instances of the class and then re-apply the class each time the list is sorted (or changed). For example:

$("ul.sortable li:has(ul)").addClass("ArrowOpen");

Here is my jsfiddle working example: http://jsfiddle.net/qbxWd/

To replicate my problem, try this: Drag/nest Item-2 into Item-1 and you'll see Item-1 will get the 'ArrowOpen' class and will display an open arrow icon. Now, move Item-2 back to the root level and you'll see that Item-1 continues to retain the 'ArrowOpen' class and the open arrow icon is still present. If this script worked as intended, when Item-2 was moved back to the root, Item-1 should have lost the arrow icon.

If anyone has any suggestions, any help would be welcomed - thanks!

Edit: In full disclosure, I did submit this to the plugin's support forum earlier this week: http://bit.ly/uXbfZY

Answer 1

in the stop function add this

$("ul.sortable li:has(ul):has(li)").addClass("ArrowOpen"); 

as first line, and delete

$("ul.sortable li:has(ul)").addClass("ArrowOpen");

from change function

NOTE:

• that it is only a work around and that the arrows will disappear while you drag items, and when you drop them, the arrows appear where it should.

• the "change" function is called several times, if I'm correct, each time you drag it from one item to another without releasing.

I hope this helps!

Fiddle http://jsfiddle.net/envy/qbxWd/5/

EDIT

a even better approach, add the following two lines as first lines in "stop" function

            $("ul.sortable li").removeClass("ArrowOpen");  
            $("ul.sortable li:has(ul):has(li)").addClass("ArrowOpen"); 

and remove everything from "change" function, it will make the desired effect and it won't call "removeClass" each time you move an item without releasing it.

EDIT2

in case you want it to work with many nested sortables, I suggest this other option which uses a recursive function to apply "ArrowOpen" to all li that has a ul with child li.

Fiddle demo

EDIT3 You can take this one step further by avoiding having the collapsed nodes lose their class. Add not('.collapsed') to the add class statement. e.g.

$("ul.sortable li:has(ul):has(li) > div > a:not(.ArrowOpen-closed)").addClass('ArrowOpen');