javascript - 从嵌套列表中删除 LI 保留子项？

Question

我有一个嵌套的 UL LI 列表。例如

之前

<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>

之后:

<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>

如果我想删除上面括号中的项目(或任何项目)，例如双击它并将其从列表中删除，但保留子元素并重新设置它们的父级。你会怎么做？我正在开发一个导航管理器，需要能够删除项目但不能删除子项，并重新设置它们的父级。

任何线索都会很棒。

我考虑过将当前元素的所有子元素附加到当前项目父元素。但这会重复 ul。

谢谢

*已更新以包括前后示例

Answer 1

如果您要执行此操作的目标元素是 elem，那么您可以执行以下操作:

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

示例如下:http://jsfiddle.net/jfriend00/RrHB2/

要将其连接到 dlbclick 事件，它看起来像这样(您填写适当的选择器以定位正确的项目):

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

<小时/>

如果你想支持多个级别并且只折叠一个级别，那么你可以使用这个:

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

或

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

工作演示:http://jsfiddle.net/jfriend00/TbDY7/