CODEWITHSUNDEEP
javascriptjquery
Fizzix
Fizzix

Reputation: 24375

How to find and unwrap elements from their parent?

So simply, I am trying to find and unwrap elements on my page. There is a slight problem going wrong with my WYSIWYG editor, and I need to apply a fix.

For example:

This is how my HTML currently looks like

<h1>
    <p>Some text here</p>
    <p>Some text here</p>
    <p>Some text here</p>
    <img src="images/img.jpg" />
</h1>
<h1>
    <p>Some text here</p>
    <p>Some text here</p>
</h1>

This how how my HTML should look like

<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<img src="images/img.jpg" />
<p>Some text here</p>
<p>Some text here</p>

How can I completely remove the h1 tag?

This is my attempt. I am running this once the entire page has been loaded.

if ($('h1').find('p').length) {
    $('p', this).unwrap();
}

PS. This always occurs at random, there is no pattern. Can sometimes happen to many elements, and sometimes only to a few.

Upvotes: 2

Views: 65

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

you can select the children of h1 and unwrap them like

$('h1 > *').unwrap();

var $h1 = $('h1');
$h1.contents().unwrap();
$h1.remove()

Demo: Fiddle

Note: the value referred by this will not change inside the if condition - from the way use have used it I assume you are thinking this inside the if block is referring to the h1 element

Upvotes: 4

Felix
Felix

Reputation: 38102

You can use .replaceWith():

$('h1').replaceWith(function() { return $(this).find('*'); });

Fiddle Demo

Upvotes: 3

Related Questions