remove parent element but keep the child element using jquery in HTML

Question

From the below HTML i want to remove the div and H2 tags but keep the UL tag using jquery.

Please advise how i can achieve this

<div class="row">
    <h2><asp:Literal ID="categoryTitle" runat="server"></asp:Literal></h2>
    <ul class="tree js-catTree" id="treeContainer" runat="server"></ul>
</div>

Thanks

Answer 1

You can use replaceWith()

$('.row').replaceWith(function() {  return $('ul', this); }); 

Working Demo

Answer 2

I stumbled across this page when simply trying to remove a parent element (whilst still keeping the children) - just in case it's useful to others I found unwrap to be exactly what I needed. For me it was a simple find-an-element-and-unwrap:

$('.target-child').unwrap();

However the addition of the h2 removal in this case makes things a little bit more involved:

$('.row h2').siblings('ul').unwrap().end().remove();

http://jsfiddle.net/t8uQ8/

The above should be more optimal as it doesn't rely on the use of an anonymous function creation and call.