Question

我有一个html结构，使用该结构用户可以为html模板创建导航或菜单。用户可以拖放并创建菜单和子菜单。当他点击更新时，菜单会随着所做的任何更改而更新。这是动态构建并停止html如下

<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

如果您想从锚点周围删除可放置的div，那么：

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

Live Example | Source

使用`unwrap`删除jquery中的直接父级

1 个答案: