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();