Remove div elements from HTML string

Question

I have HTML like this in a string:

<div style="" class="">
    <div style="" class="">
        <h1>test</h1>
        <p>
            text
        </p>
    </div>
</div>

How can I use jQuery to remove the <div>'s and just keep the inner HTML:

<h1>test</h1>
<p>
    text
</p>

What do you mean by "keep"? Is there another element you want them appended to? — Jamiec
– Jamiec, Commented Mar 4, 2015 at 12:27

Jai · Accepted Answer · 2015-03-04 12:27:23Z

4

use .unwrap();

from the docs:

Description: Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

$('p, h1').unwrap().unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="" class="">
    <div style="" class="">
        <h1>test</h1>
        <p>
            text
        </p>
    </div>
</div>

answered Mar 4, 2015 at 12:27

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

Comments

dfsq · Accepted Answer · 2015-03-04 12:28:36Z

1

The simplest is to use unwrap method like this:

$('div').contents().unwrap('div');

Check the demo below.

$('button').click(function() {
    $('div').contents().unwrap('div');
});

div {
    border: 1px red solid;
    padding: 10px;
}
div div {
    border-color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="" class="">
    <div style="" class="">
        <h1>test</h1>
        <p>
            text <button>Remove div's</div>
        </p>
    </div>
</div>

answered Mar 4, 2015 at 12:28

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Remove div elements from HTML string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related