Search code examples
jquerydomparent

Removing only the parent element in the DOM JQuery

I am running out of ideas. I have an issue here where I need to remove only the parent element while preserving the child element.

<div class="remove_this_only">
    <table>
        <tbody>
            <tr>
                <td>I want to get preserved</td>
            </tr>
        </tbody>
    </table>
</div>

the resultant output should be

<table>
    <tbody>
        <tr>
            <td>I want to get preserved</td>
        </tr>
    </tbody>
</table>
Solution

  • A straight forward way: 

    var div = $(".remove_this_only");
var tmp = div.children().clone();
var parent = div.parent();
div.remove();
tmp.appendTo(parent);

    A fiddle: http://jsfiddle.net/cb9sb/