Form will not submit if .remove() is used?

Question

I'm having a spot of bother with either Firefox, jQuery or both. OS is Windows 7, Firefox is version 4.0.1 and jQuery is between 1.5 - 1.6.

Basically I have a form with a button element within, to which a click event is attached via jQuery which removes the button's closest parent div. This all works wonderfully.

Now the problem comes when you try to submit the form after carrying out the aforementioned action. Chrome, IE, Opera and Safari submit the form fine. Firefox on the other hand refuses to submit the form at all.

I've even tried $("form").submit(); in Firebug to no avail.

Here is a test on jsFiddle, simply click the - button and then submit in Firefox to see what I mean.

Any help on the matter is much appreciated!

Edit: I need to be able to submit the form via a Javascript/jQuery event attached to a button outside of the form element.

Answer 1

I think I've got the final solution for this problem. I've spend the last couple of days struggling with this strange behavior and finally came accross this thread and this one which helped me a lot.. =))

The button element has a 'type' attribute which is set by default to 'submit' in almost all browsers (except IE).

The problem seems to be related to the fact that we're removing the node while processing the submit event and therefore breaking the submit event of the form...

So adding type="button" to the button element will actually solve this issue.

Here is a workign jsFiddle example.