Remove div from html - jQuery

Question

I am trying to remove the DIV after nav and keep the menu simple like nav > ul > li

I tried unwrap but it doesn't work.

Here is the HTML structure

<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>

Is this page public so we can poke at it? Not many details here. — sorak
– sorak, Commented Dec 24, 2017 at 9:09
@sorak the code that you need to poke at is in the question. — Junius L
– Junius L, Commented Dec 24, 2017 at 9:26
I thought perhaps it was requesting modifications that would not break a functional dropdown menu, which would require examining the associated JS — sorak
– sorak, Commented Dec 24, 2017 at 9:29

Sagi · Accepted Answer · 2017-12-24 09:10:58Z

4

You basically need to replace the div with its inner content

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

answered Dec 24, 2017 at 9:10

Sagi

9,3643 gold badges38 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiran · Accepted Answer · 2017-12-24 09:13:09Z

0

Use .contents() and .unwrap() as:

$("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>

answered Dec 24, 2017 at 9:13

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Comments

Pradeep Lakku · Accepted Answer · 2017-12-24 09:22:32Z

0

The .unwrap() method removes the element's parent.

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

Plnkr example unwrap() demo

answered Dec 24, 2017 at 9:22

Pradeep Lakku

2612 silver badges7 bronze badges

2 Comments

Pradeep Lakku Over a year ago

Did you apply .unwrap() method to the children, here the #menu-headermenu-1 to remove the div

Pradeep Lakku Over a year ago

In the plnkr example I provided inspect Menu Item and see that there is no div in the element hierarchy. Code in script.js

BenSabry · Accepted Answer · 2017-12-24 09:25:54Z

0

to remove the div WITHOUT the content: https://api.jquery.com/unwrap/

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

to remove the div WITH the content: https://api.jquery.com/remove/

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

edited Dec 24, 2017 at 9:25

answered Dec 24, 2017 at 9:08

BenSabry

5234 silver badges10 bronze badges

1 Comment

Junius L Over a year ago

this will remove the nav, and OP clearly says they want to remove only the div.

Bhuwan · Accepted Answer · 2017-12-24 10:03:41Z

0

Just use unwrap() to ul#menu-headermenu-1.

unwrap() remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

$('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>

answered Dec 24, 2017 at 10:03

Bhuwan

16.9k5 gold badges38 silver badges62 bronze badges

Comments

vicky patel · Accepted Answer · 2017-12-24 10:16:34Z

0

$(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>

answered Dec 24, 2017 at 10:16

vicky patel

7052 gold badges8 silver badges14 bronze badges

Collectives™ on Stack Overflow

Remove div from html - jQuery

6 Answers 6

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related