從嵌套列表中刪除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保留孩子嗎？

回答

相關問題