Remove div without moving the elements inside of it using jQuery unwrap

Question

I want to remove the div that has class "form-group" but I don't want to remove the code inside of it. jQuery unwrap should do this but I'm not sure how to write the code.

<form class="navbar-form">
<div class="form-group">
<input type="text" id="search" class="form-control" placeholder="Search">
<button class="btn btn-primary modal-search" type="submit">
<span class="icon icon-search"></span>
</button>
</div>       
</form>

Answer 1

You can also save the data of the div and then append it to the form once you're done. Here is a fiddle example for that:

http://jsfiddle.net/afzaal_ahmad_zeeshan/pPGj2/

The code was:

var dataContent = $('.form-data').html();
$('.form-data').remove();
$('form').append(dataContent);

Answer 2

Use .unwrap()

$('.form-group').children().unwrap();

DEMO