刪除父元素並重新添加子元素

Question

我有一個無序列表導航，這裏是我遵循的簡單結構/必須遵循以使我的jQuery插件正常工作，因此使此代碼結構成爲必需：

<nav id="mp-menu" class="mp-menu"> 
<div class="mp-level"> 
    <ul id="demo1" class="nav"> 
     <li> 
      <a href="#">Devices</a> 
      <div class="mp-level"> 
      <h2>Devices</h2> 
      <a class="mp-back" href="#">back</a> 
      <ul> 
       <li><a href="#">Mobile Phones</a></li> 
       <li><a href="#">Televisions</a></li> 
       <li><a href="#">Cameras</a></li> 
      </ul> 
      </div> 
     </li> 
     <li> 
      <a href="#">Magazines</a> 
      <div class="mp-level"> 
       <h2>Magazines</h2> 
       <a class="mp-back" href="#">back</a> 
       <ul> 
        <li><a href="#">National Geographic</a></li> 
        <li><a href="#">Scientific American</a></li> 
       </ul> 
      </div> 
     </li> 
     ... 
    </ul> 
</div> 
</nav> 

我需要提供一個回退，我選擇了另一個需要使用不同結構的jQuery插件。我需要與類名.mp-level但仍保持所有無序列表包括.mp-level孩子列表中刪除的DIV的。

結果只會是沒有標題和DIV的無序列表。我下面的代碼被刪除正確的元素，但我的問題是與重新插入孩子無序列表（特別是2級）：

$("#demo1 h2, .mp-back").remove(); 
$(".mp-level ul li .mp-level").detach(); 
$(".mp-level ul li").append('.mp-level ul li .mp-level ul'); 

任何人有任何意見如何重新插入孩子UL的我已刪除後的父母？

Answer 1

你可以做的編輯是工作在此之前

$("#mp-menu").find(".mp-level").each(function(i,n){//each ".mp-level" 
    $(n).parent().append($(n).children());//append children to parent 
    $(n).remove();//remove actual div 
});   

http://jsfiddle.net/WBWwG/

Answer 2

可以通過將它們分配給一個變量，然後使用該變量在.append()呼叫保存分離的節點（包裹jQuery對象的內部）。

事情是這樣的：

// this selector doesn't select anything from the example html, btw 
var $mp_level = $(".mp-level ul li .mp-level").detach(); 
$(".mp-level ul li").append($mp_level);