<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>
Remove the parent element not
its child using jQuery
</
title
>
<
script
src
=
</
script
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
id
=
"h1"
>
GeeksForGeeks
</
h1
>
<
div
id
=
"parent"
style
=
"border: 1px solid black;"
>
<
p
id
=
"GFG_UP"
style
=
"font-size: 15px; font-weight: bold;"
>
</
p
>
<
button
onclick
=
"GFG_Fun()"
>
click here
</
button
>
<
p
id
=
"GFG_DOWN"
style
=
"color:green; font-size: 20px; font-weight: bold;"
>
</
p
>
</
div
>
<
script
>
var up = document.getElementById('GFG_UP');
up.innerHTML = "This content is inside a big DIV.";
var down = document.getElementById('GFG_DOWN');
down.innerHTML = "Click on the button to remove "
+ "just this parent DIV";
var heading = document.getElementById('h1');
function GFG_Fun() {
var content = $("#parent").contents();
$("#parent").replaceWith(content);
}
</
script
>
</
body
>
</
html
>