Question

I have come across some strange behaviour, and I’m assuming a bug in Firefox, when removing a input submit element from the DOM from within the click event.

The following code reproduces the issue:

<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>

To reproduce:

• Click “remove me”
• Click “submit via js”. Note that the form does not get submitted, this is the problem.
• Click “submit normally”. Note that the form still gets submitted normally.

It appears that, under Firefox, if you remove a submit button from within the click event it puts the form in an invalid state so that any future calls to form.submit() are simply ignored. But it is a JavaScript-specific issue as normal submit buttons within this form still function fine.

To be honest, this is such a simple example of this issue that I was expecting the internet to be awash with other people experiencing it, but so far searching has yealded nothing useful.

Has anyone else experienced this and if so, did you get to the bottom of it?

Answer 1

Seems to be related to the fact that you’re removing the node while processing the event.
This indeed looks like a bug from Firefox.

In the meanwhile, this hack seems to work but delaying 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)" />