Javascript 删除行后提交动态表单的问题

我有一个表格，我正在建设一个表，我想能够添加或删除行到这个表单和提交

这是我表格的js.fiddle

说明
价格
删除
@对于（int j=0；j

该脚本可以很好地添加新行和删除行。问题是，当我删除表单不再正确提交的行时，删除的行之后的所有行都将被忽略

我相信这是因为ID中存在断开连接，因为模型绑定器无法解析它

有什么建议吗

我相信这是因为ID中存在断开连接，因为模型绑定器无法解析它

我建议尽可能避免名字和/或ID中的方括号，并在服务器端解决您的问题。在任何情况下，如果需要重新排列id和NAMEs属性，只需在每个表行上循环（因为在服务器端，您将只处理名称，您只能重新排列这些名称）：

var计数器=0；
$（“#feeTable”）。在（“单击”，“添加行”，函数（）{
var cols=“”；
cols+=''；
cols+='$'；
cols+=''；
cols+=''；
$（“#feeTable”）。追加（cols）；
计数器++；
});
$（文档）。在（“单击”、“删除”按钮）上，函数（事件）{
$（this）.tr.remove（）；
$（“#feeTable tr:has（input.deleteButton）”）。每个（函数（rIdx，行）{
$（行）.find（“[id^=Fees_]”）。每个（函数（cIdx，col）{
//col.id=col.id.replace（/\d+/，rIdx）；
col.name=col.name.replace（/\d+/，rIdx）；
});
})
});

说明
价格
删除
Save
非常有用，谢谢，我是.Net开发人员，依赖内置模型绑定，所以我通常只使用括号表示法。如果有更好的方法，我愿意接受建议，但再次感谢你的回答。
<form asp-controller="Institution" asp-action="AccountCategoryFees" method="post" class="form-horizontal">
    <div asp-validation-summary="All" class="text-danger"></div>
    <input asp-for="AccountCategoryId" type="hidden"/>

    <table class="table table-responsive" id="feeTable">
        <thead>
            <tr>
                <td><strong>Description</strong></td>
                <td><strong>Price</strong></td>
                <td><strong>Delete</strong></td>
            </tr>
        </thead>

        @for (int j = 0; j < Model.Fees.Count; j++)
        {
            <tr>
                <td>
                    <input asp-for="Fees[j].Description" />
                </td>
                <td>
                    <span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input asp-for="Fees[j].Price" type="number" min="0.00" step="0.0001" max="2500" class="form-control" />
                </td>
                <td>
                    <input type="button" class="deleteButton btn btn-md btn-danger" value="Delete">
                </td>
            </tr>
        }

        <tfoot>
            <tr>
                <td colspan="5" style="text-align: left;">
                    <input type="button" class="btn btn-lg btn-block " id="addrow" style="color:gray" value="Add Fee" />
                </td>
            </tr>
            <tr></tr>
        </tfoot>
    </table>

    <div class="modal-footer" style="padding:0px;">
        <button type="submit" class="btn bg-primary">Save</button>
    </div>
</form>


<script>
        var feeTypes = @Html.Raw(Json.Serialize(@Model.Fees));
</script>

<script>
        var counter = @Model.Fees.Count;

        $('#feeTable').on("click", "#addrow", function () {

            var cols = "<tr>";
            cols += '<td><input id="Fees_' + counter + '__Description" name="Fees[' + counter + '].Description"/></td>';
            cols += '<td><span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input id="Fees_' + counter + '__Price" name="Fees[' + counter + '].Price" type="number" min="0.00" step="0.0001" max="2500" value="0" class="form-control"/></td>';
            cols += '<td><input type="button" class="deleteButton btn btn-md btn-danger" value="Delete"></td>';
            cols += '</tr>';

            $("#feeTable").append(cols);
            counter++;
        });

        $(document).on("click", ".deleteButton", function (event) {
            $(this).closest("tr").remove();
        });
</script>

$('#feeTable tr:has(input.deleteButton)').each(function(rIdx, row) {
    $(row).find('[id^=Fees_]').each(function(cIdx, col) {
        // col.id = col.id.replace(/\d+/, rIdx);
        col.name = col.name.replace(/\d+/, rIdx);
    });
 })