Использование `unwrap` для удаления ближайшего родителя в jquery

Question

У меня есть структура html, в которой пользователь может создать навигацию или меню для html-шаблонов. Пользователь может перетаскивать drop и создавать меню и подменю. Когда он нажимает на обновление, меню обновляется с тем, что изменения made.This строится динамически и HTML ceated как ниже

<ol class="sortable ui-sortable" id="addMenu"> 
<li> 
    <div class="droppable ui-droppable"> 
    <a href="javascript:void(0);">Menu1</a> 
    </div> 
    <ol> 
    <li style="display: list-item;"> 
    <div class="droppable ui-droppable"> 
     <a href="javascript:void(0);">Menu2</a> 
    </div> 
    </li> 
    </ol> 
</li> 
<li> 
    <div class="droppable ui-droppable"> 
     <a href="javascript:void(0);">Menu3</a> 
    </div> 
</li> 

То, что мы хотим достичь это, когда пользователь говорит создать меню или обновления его, div с class=droppable следует удалять из любого места в структуре, остальную структуру нетронутой.

Я пробовал его с помощью функций .unwrap() и replaceWith(), но, похоже, не работает должным образом.

var menuHtml = $('#addMenu').html(); 
menuHtml = '<ol id="toRmv">'+menuHtml+'</ol>'; 

$('#'+IdParent+' .navigationInner').html(menuHtml); 
var newHtml = $('#'+IdParent+' .navigationInner').html(); 

$menuHtml = $("#toRmv div.droppable > a").unwrap(); 

$('#'+IdParent+' .navigationInner').html($menuHtml); 

Как это можно достичь?

Answer 1

Если вы хотите удалить Droppable div со всего якоря, а затем:

$("#addMenu div.droppable > a").unwrap(); 

Live Example | Source