从嵌套列表中删除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>

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>

，如果我想在托架（anyitem）通过双击例如去除上面的项目，并从列表中删除但是保留孩子们的元素和重新养育他们。你会如何做到这一点？我正在致力于导航管理器，需要能够删除项目而不是子项，并让他们重新参与。

任何线索都会很棒。

我已经尽力让当前元素的所有子元素添加到当前项目父项。但那会重复ul。

感谢

*更新到之前包含和AFTER实例

来源

2012-08-27 kalabo

HTTP：//whathaveyoutried。com/ –

除了爆炸药所说的，“重新养育”对我来说还不清楚 - 你能否提供一个例子，说明你的html结构看起来像你做什么后的样子？ – MaxPRafferty

whathaveyoutried.com？对于http://letmegooglethatforyou.com/?q=jquery+unwrap –

如果你想要做这个操作的目标元素是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-27 21:33:52 jfriend00

，这是非常棒的效果，这对于单个嵌套的UL很有用，但是如果存在移动级别在他们下面他们也被删除到一个单一的水平。 – kalabo

@ user257503 - 好的，我在答案中添加了第二个例子，它保留了嵌套的项目。我不知道你需要多层次的工作。 – jfriend00

感谢这个..我在我的主要例子中测试，然后我将在5分钟后回来。真的很烦人，当你发现这个简单的东西;） – kalabo

事情是这样的：

$("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()，因为这些事件通过DOM向上传播，因此一个嵌套li元素的click事件会传播到父li元素（s）也是。

来源

2012-08-27 21:28:18 nnnnnn

http://jsfiddle.net/joaopsilva/hK2SA/ –

$('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-27 21:49:47 yngccc

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

回答

相关问题