Is there a method to remove the parent element while retaining the current element?
Take a look at my example here:
<div id="parent">
<div id="child">
<span>some text</span>
</div>
</div>
div
{
padding: 20px;
}
#parent
{
background-color: green;
}
#child
{
background-color: red;
}
I am trying to find a way to swap out the parent div with the child div. Essentially, I want to take the parent of #parent and replace its inner HTML with that of #child.
I have experimented with visibility but it either maintains space or hides the entire tree. Is there a CSS solution available? If not, how can this be accomplished easily using jQuery? (Keep in mind that in my actual scenario, it's nested further up).