CODEWITHSUNDEEP
jquerycsshtml
Shimmy Weitzhandler
Shimmy Weitzhandler

Reputation: 104841

Eliminate parent element with CSS?

Is there a way to eliminate parent element while keeping current element?

Here's my example:

<div id="parent">
    <div id="child">
        <span>some text</span>
    </div>
</div>   

div
{
    padding: 20px;
}
#parent
{
    background-color: green;
}
#child
{
    background-color: red;
}

I'm looking for a way to replace the parent div with child div. Meaning I take #parent's parent, and replace its inner html with #child.
I tried playing with visibility but it still takes up the space or hides entire tree. Is there a CSS way? Otherwise how should it be done easily with jQuery? (note that in my real scenario it's some level up).

Upvotes: 0

Views: 99

Answers (2)

Jai
Jai

Reputation: 74738

There are two ways of doing with .unwrap(); method and .html();:

With.unwrap() (preferred way):

$('#child').unwrap();

With .html();:

var o = $('#child').html();
$('#parent`).html(o);

Upvotes: 1

Felix
Felix

Reputation: 38112

You can use .unwrap():

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

$('#child').unwrap();

Updated Fiddle

Upvotes: 2

Related Questions