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

You can use replaceWith()

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

Working Demo


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.

Tags:

Jquery