使用tr.remove（）删除HTML表格行，提交按钮只返回它上面的行而不是它下面的行

Question

我有一个HTML表，我有每行的删除按钮。单击删除按钮，它转到javascript，我使用下面的代码删除行。当我尝试使用submit（Ajax.beginform）将表内容提交回控制器时，它仅在已删除的行上方发回数据，并且在删除的行下面没有任何内容。即使在UI中，它仍然显示已删除行上方和下方的所有行。

示例：假设我上传了3个文档并删除了中间文档，它将从表中删除该行，但是当我单击“上载”按钮时，我只获得第一行。

但是如果我删除了最后一行，即第三个文档，那么我将在上传按钮操作中正确地返回2个以上的文档。

在此先感谢您的帮助

javascript代码：

function removeDocument(selector) {    
    $(selector).closest('tr').remove();
}

HTML代码：

 @using (Ajax.BeginForm("Upload", "MatterFiling", new AjaxOptions { HttpMethod = "POST", OnSuccess = "SuccessUploadDocument", OnFailure = "OnUploadFailure" }))
    {

        <table class="table table-bordered" id="DocumentTable">
            <thead>
            <tr>
                <th><span class="reqAsterisk">* </span>Document Title</th>               
                <th></th>
            </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.Count(); i++)
                {
                    <tr>
                        <td style="width: 50%; display:none" class="nr" >                            
                            @Html.TextAreaFor(m => Model.FileName, htmlAttributes: new { @class = "form-control dmm-autoresize", @rows = "1" })                            
                        </td>
                        <td>
                            <a style="color:red; cursor:pointer" onclick="removeDocument(this)">
                                <i class="far fa-trash-alt"></i>
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <input type="submit" name="UploadButton" value="Upload" id="UploadDocsButton" class="btn btn-primary"/> 
    }

This is after deleting the row

This is before deleting the row

Answer 1

如果您使用的是表单，那么您可以刷新表单，也可以尝试使用username []等数组命名输入类型名称。