Jquery UI Drag and drop - How to get parent and child elements

Question

Hi Guys,

I have two divs source and target. Both have "ul" and "li". I have set the ul to be draggable. What I want to do is to drop all the "li" (child) pertaining to ul being dragged to the target. Given below is my code:

$(".source .primary").draggable({
            revert: "invalid",
            containment: "#documentPartsMaintenance", // stick to demo-frame if present
            helper: "clone",
            cursor: "move"
        });
        $("#target").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function (event, ui) {
                var id = ui.draggable.attr("id");
                if ($("#target").find("#" + id).length > 0)
                    ui.helper.fadeOut();
                else {
                    var children = ui.draggable.parent().parent().html();                        
                    var ul = $(children);
                    ul.children("li:first").append("<span class='odi-Delete-small deleteNode' style='float:right'></span>");
                    alert(ul.html());//shows correctly what I want
                    $(this).append(ul);
                }
            }
        });

It does what I want, creates "ul" and adds a deletNode element to its first "li" also but the primary dropped element still exists in the target. Any help to get rid of that element would be most appreciated.

Thanks,

Raja