Question

EDIT: I simplified the example to use text inputs. Same error. Form fails to submit when an input is removed from the form.
EDIT: Duplicated in Firefox 14. Chrome does not have same behaviour.

I have a multiple file upload form with jquery to add and remove file input elements from the form. If I remove one of the inputs the form.submit() function does not proceed. Below is simplified code using “text” inputs. And a Fiddle at http://jsfiddle.net/carbontax/rMMuE/

    <form id="form-foo" method="POST">
        <div id="input-container-container">
       </div>
    </form>
    <input type="button" id="add-text-input" value="ADD TEXT INPUT">
    <input type="button" id="submit" value="SUBMIT">

Script

    $('#submit').click(function() {
        $('#form-foo').submit();
    });

    $("#add-text-input").click(function() {
        var div = $('<div/>', {
            'class': 'input-container'
        }).append($('<button/>', {
            'class': 'delete-text-input',
            html: "X"
        }));
        var input = $('<input/>', {
            type: 'text',
            name: 'texts',
            'class': 'input-text'
        }).appendTo(div);
        div.appendTo($('#input-container-container'));
    });

    $('#form-foo').on('click', 'button.delete-text-input', function(e) {
        e.preventDefault();
        $(this).closest('div').remove();
    });

Answer 1

Satya Teja had a helpful suggestion to put the submit button inside the form, but I don’t know why it works. In my case I need to submit the form indirectly, based on the outcome of another event. So here is the solution.

HTML: add a hidden submit button inside the form

    <form id="form-foo" method="POST">
        <div id="input-container-container">
       </div>
       <!-- workaround to allow submit after deleting a form element -->
       <input type="submit" id="form-foo-submit" style="display: none"/>
    </form>
    <input type="button" id="add-text-input" value="ADD TEXT INPUT">
    <input type="button" id="submit" value="SUBMIT">

Script. Instead of calling submit() on the form, call click() on the hidden submit button. Works in Firefox, Chrome and even IE6

    $('#submit').click(function() {
        // Instead of calling $('#form-foo').submit()
        $('#form-foo-submit').click();
    });

    $("#add-text-input").click(function() {
        var div = $('<div/>', {
            'class': 'input-container'
        }).append($('<button/>', {
            'class': 'delete-text-input',
            html: "X"
        }));
        var input = $('<input/>', {
            type: 'text',
            name: 'texts',
            'class': 'input-text'
        }).appendTo(div);
        div.appendTo($('#input-container-container'));
    });

    $('#form-foo').on('click', 'button.delete-text-input', function(e) {
        e.preventDefault();
        $(this).closest('div').remove();
    });