[英]Remove div from html - jQuery
I am trying to remove the DIV
after nav and keep the menu simple like nav > ul > li
我正在尝试在导航后删除DIV
,并保持菜单简单,例如nav > ul > li
I tried unwrap
but it doesn't work. 我尝试unwrap
但是没有用。
Here is the HTML structure 这是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>
您基本上需要用其内部内容替换div
$(".menu-headermenu-container").replaceWith($("#menu-headermenu-1"));
to remove the div WITHOUT the content: https://api.jquery.com/unwrap/ 删除没有内容的div: https : //api.jquery.com/unwrap/
$(".menu-headermenu-container").contents().unwrap();
to remove the div WITH the content: https://api.jquery.com/remove/ 使用内容删除div: https : //api.jquery.com/remove/
$(".menu-headermenu-container").remove();
Use .contents() and .unwrap() as: 使用.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>
The .unwrap()
method removes the element's parent . .unwrap()
方法删除元素的父元素 。
$('#menu-headermenu-1').unwrap();
Plnkr example unwrap() demo PLNKR示例unwrap ()演示
Just use unwrap()
to ul#menu-headermenu-1
. 只需使用ul#menu-headermenu-1
unwrap()
来ul#menu-headermenu-1
。
unwrap() remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place. 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>
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.