0

我有一个嵌套的 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。

谢谢

*更新包括之前和之后的例子

4

3 回答 3

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()方法从 DOM 中删除元素，但保留所有与它们关联的 jQuery 数据，因此您可以稍后重新插入它们。

当然，$children如果您打算在单击事件之后的某个时间点使用该变量（例如，为了响应某些稍后的事件），您需要在单击处理程序之外声明该变量。

如果这样做是为了响应单击或双击，则需要使用这些事件，event.stopPropagation()因为这些事件通过 DOM 向上传播，因此嵌套 li 元素之一的单击事件也会传播到父 li 元素。

于 2012-08-27T21:28:18.243 回答
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/

于 2012-08-27T21:33:52.070 回答
0 
$('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();
 }
于 2012-08-27T21:49:47.613 回答