Question

I have a form with a few input fields spread throughout the markup.

What I want to do is remove everything but the inputs from it.

So this:

<form>
<table><tr><td>more info here<input type="submit" name="registerForEvent" id="registerForEvent" value="Register Online" class="Button" /></td></tr>
<tr><td>table goes here blah blah....
<table><tr><td></td><td>  test text here:<input type="hidden" name="test"></td></tr></table>
</td></tr>
</table>
</form>

becomes this

<form>
<input type="submit" name="registerForEvent" id="registerForEvent" value="Register Online" class="Button" />
<input type="hidden" name="test">
</form>

I tried

$('form:not(input)').remove(); 

to no avail

http://jsfiddle.net/X5fFC/

Answer 1

The inputs are children of children of the form, so removing the first children will remove the inputs as they themselves are children of those children etc?

Try moving all inputs to the form root level, then remove everything but the inputs:

$('input', 'form').appendTo('form');
$('*','form').not('input').remove(); ​

FIDDLE