Question

I have a nested UL LI list. e.g.

BEFORE

<ul>
    <li>Item A</li>
    <li>Item B
        <ul>
            <li id="removeme">Item BA (REMOVE ME)
            <ul>
                <li>Item BAA</li>
                <li>Item BAB</li>
                <li>Item BAC</li>
                <li>Item BAD
                    <ul>
                    <li>Item BADA</li>
                    <li>Item BADB</li>
                    <li>Item BADC</li>
                    <li>Item BADD</li>
                    </ul>                 
                </li>
                <li>Item</li>
            </ul>            
            </li>
            <li>Item BB</li>
            <li>Item BC </li>
            <li>Item BD</li>
        </ul>
    </li>
    <li>Item C</li>
    <li>Item D</li>
    <li>Item E</li>
</ul>

AFTER :

<ul>
    <li>Item A</li>
    <li>Item B
        <ul>
            <li>Item BAA</li>
            <li>Item BAB</li>
            <li>Item BAC</li>
            <li>Item BAD
                <ul>
                <li>Item BADA</li>
                <li>Item BADB</li>
                <li>Item BADC</li>
                <li>Item BADD</li>
                </ul>                 
            </li>
            <li>Item</li>           
            </li>
            <li>Item BB</li>
            <li>Item BC </li>
            <li>Item BD</li>
        </ul>
    </li>
    <li>Item C</li>
    <li>Item D</li>
    <li>Item E</li>
</ul>

If i wanted to remove the item above in the brackets (or anyitem) by double clicking it for example and remove it from the list however preserving the children elements and re-parenting them. how would you do this? i am working on a navigation manager and need to be able to delete items but not the children and have them re-parented.

Any cluees would be great.

I’ve though about getting all children of current element the append to current items parent. But that would duplicate the ul.

Thanks

*UPDATED TO INCLUDE BEFORE AND AFTER EXAMPLES

Answer 1

If the target element that you want to do this operation on is elem, then you can do this:

$(elem).find("li").insertAfter(elem);
$(elem).remove();

Example here: http://jsfiddle.net/jfriend00/RrHB2/

To hook this up to a dlbclick event, it would look something like this (where you fill in the appropriate selector to target the right items):

$(selector).dblclick(function(e) {
    e.stopPropagation();
    var target = $(this);
    target.find("li").insertAfter(item);
    target.remove();
});

---

If you want to support multiple levels and only collapse one level, then you could use this:

var target = $("#removeme");
target.children("ul").children().insertAfter(target);
target.remove();

or

$(selector).dblclick(function() {
    e.stopPropagation();
    var target = $(this);
    target.children("ul").children().insertAfter(target);
    target.remove();
});

Working demo: http://jsfiddle.net/jfriend00/TbDY7/