Javascript removeChild (this) from input [type = "submit"] onclick aborts the use of the future form form.submit () under firefox

Question

I came across some weird behavior and I accept an error in firefox when removing an input element from the DOM from the click event.

The following code reproduces the problem:

<form name="test_form"> <input type="submit" value="remove me" onclick="this.parentNode.removeChild(this);" /> <input type="submit" value="submit normally" /> <input type="button" value="submit via js" onclick="document.test_form.submit();" /> </form> 

Playback:

• Click "delete me"
• Click "send via js". Please note that the form is not submitted, this is a problem.
• Click "send normally." Please note that the form is still submitting normally.

It seems that in Firefox, if you remove the submit button from the click event, it puts the form in an invalid state, so any future calls to form.submit () are simply ignored. But this is a javascript related issue as regular submit buttons on this form are still functioning fine.

Honestly, this is such a simple example of this problem that I expected that the Internet would be flooded with other people who are exhausting it, but so far the search has not brought anything useful.

Has anyone else experienced this, and if so, have you reached it?

Many thanks

Answer 1

This seems to be due to the fact that you are deleting the node while processing the event.
It really looks like a bug from Firefox.

At the same time, this hack seems to work, but postpones the removal:

 <script type="text/javascript"> function delsubmit(el) { window.setTimeout(function() { el.parentNode.removeChild(el); }, 50); return false; } </script> <input type="submit" value="remove me" onclick="return delsubmit(this)" />