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>

如果我想通过双击括号（或anyitem）删除上面的项目，例如将其从列表中删除，但保留子元素并重新设置它们。你会怎么做？我正在开发一个导航管理器，需要能够删除项目而不是孩子，并让他们重新成为孩子。

任何线索都会很棒。

我想让当前元素的所有子元素追加到当前项目的父元素。但这会复制ul。

由于

*在示例之前和之后更新包括

Answer 1

这样的事情：

$("li").dblclick(function(e) {
    e.stopPropagation();
    var $children = $(this).children().detach();
    $(this).remove();
    // do something with $children here, e.g.,
    // $children.appendTo(someOtherElement)
});

.detach() method从DOM中删除了元素，但保留了与它们相关的所有jQuery数据，因此您可以稍后重新插入它们。

当然，如果您打算在点击事件之后的某个时刻使用$children变量，那么您需要在点击处理程序之外声明event.stopPropagation()变量（例如，为了响应稍后的事件）。

如果执行此操作以响应单击或双击，则需要使用{{1}}，因为这些事件通过DOM传播，因此其中一个嵌套li元素的click事件会传播到父母李元素。

Answer 2

如果要对此操作执行此操作的目标元素为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/

Answer 3

$('elem').dbclick(function(e) {
    var elem = $(e.target);
    var children = elem.children();

    for (var i = children.length-1; i >= 0; i--)
       children[i].insertAfter(elem);

     elem.remove();
 }

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

3 个答案: