从HTML删除div-jQuery

Question

我正在尝试在导航后删除DIV ，并保持菜单简单，例如nav > ul > li

我尝试unwrap但是没有用。

这是HTML结构

<nav>
  <div class="menu-headermenu-container">
    <ul id="menu-headermenu-1" class="menu">
      <li><a href="corporate-training/">Menu Item</a></li>
    </ul>
  </div>
</nav>

Answer 1

您基本上需要用其内部内容替换div

$(".menu-headermenu-container").replaceWith($("#menu-headermenu-1"));

Answer 2

删除没有内容的div： https : //api.jquery.com/unwrap/

 $(".menu-headermenu-container").contents().unwrap();

使用内容删除div： https : //api.jquery.com/remove/

 $(".menu-headermenu-container").remove();

Answer 3

使用.contents（）和.unwrap（）作为：

 $("div.menu-headermenu-container").contents().unwrap(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <div class="menu-headermenu-container"> <ul id="menu-headermenu-1" class="menu"> <li><a href="corporate-training/">Menu Item</a></li> </ul> </div> </nav> 

Answer 4

.unwrap()方法删除元素的父元素 。

$('#menu-headermenu-1').unwrap();

PLNKR示例unwrap （）演示

Answer 5

只需使用ul#menu-headermenu-1 unwrap()来ul#menu-headermenu-1 。

unwrap（）从DOM中删除匹配元素集的父元素，而将匹配元素保留在原处。

 $('ul#menu-headermenu-1').unwrap(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <div class="menu-headermenu-container"> <ul id="menu-headermenu-1" class="menu"> <li><a href="corporate-training/">Menu Item</a></li> </ul> </div> </nav> 

Answer 6

 $(document).ready(function(){ $("nav").find(".menu-headermenu-container").contents().unwrap(); }) 

 .menu-headermenu-container{ background:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <nav> <div class="menu-headermenu-container"> <ul id="menu-headermenu-1" class="menu"> <li><a href="corporate-training/">Menu Item</a></li> </ul> </div> </nav>