Remove the Parent Div, but not what's inside the parent.

Question

Hey, I'm not sure if this is possible but anyway. Say for example:

<div id="foo">
    <a href="#" id="bar">Remove Parent</a>
</div>

$(function() {
    $('#bar').click(function() {
        $(this).parent().remove();
    }); 
});

Is it possible that you can remove the parent container, in this example #foo but keep the child anchor tag #bar?

Answer 1

In this situation you'd be looking for .unwrap()

example...

$(function() {
    $('#bar').click(function() {
        $(this).unwrap();
    });
});