Using jQuery to remove a second form element without losing the child elements

Question

I have some AJAX work that brings across an additional form element that I don't need in the DOM. I don't have the ability to remove it server side, so I'm looking for some jQuery or classic JavaScript that will allow me to capture all the child elements of the form, remove the form I don't need and finally re-append the child elements back to the DOM.

Any help would be much appreciated

EDIT: Thanks for the quick answers, the below is what I actually used and it works perfect

            // Captures the children
            var children = $("form:eq(1)").children();
            // Removes the form
            $("form:eq(1)").remove();
            // append the child elements back into the DOM 
            $("#fillDiv").append(children);

Answer 1

Rather than using the .html() method (which will cause you to lose any events associated with form elements) you should move the child nodes:

// grab the child nodes
var children = $('#badForm').children();
// or var children = $('#badForm > *');

// move them to the body
$(body).append(children);

// remove the form
$('#badForm').remove();

Answer 2

If you have ajax code like this:

$.ajax({
    type: "get",
    url: "url",
    data: ,
    cache: false,
    success: function(data){

    }
});

You can add on success function this:

$(data).find('#whatYouNeed').appendTo('#whereYouNeed')

In this way you can extract anything you want from that page :)