Delete table row button removes all subsequent rows

I have a table I’ve built in an app that when I click delete removes all rows following the row that was deleted on submit. That means that the table looks good to the user with just that one row removed, but when it hits the viewmodel on post action, those subsequent rows aren’t included.

I’ve added some pretty complex code that goes all over the place to edit the index values of the rows but that ended up confusing the problem even more with some values replacing others and some other values just being set to 0. I know there has to be a more simple way.

I set this example back to the more simplified version where the delete appears to work well but then doesn’t include any subsequent values in the viewModel when it hits the controller.

Here is the HTML Table

                <input type="button" value="Add" class="button is-primary" id="btnAdd" />
                <table id="tblPart" style="table-layout:fixed; width:100%;">
                    <thead>
                        <tr>
                            <th>
                                Part Number
                            </th>
                            <th>
                                Quantity
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (var i = 0; i < Model.NumberModel.Count(); i++)
                        {
                            <tr >
                                <td >
                                    @Html.TextBoxFor(modelItem => Model.NumberModel[i].PartNum, new { id = $"part{i}", required = "required", @class = "partTest" })
                                </td>
                                <td>
                                    @Html.TextBoxFor(modelItem => Model.NumberModel[i].Quantity, new { type = "number", min = "0", id = $"quantity{i}", required = "required" })
                                </td>
                                <td>
                                    <input type='button' 
                                    onclick='Remove(this)' 
                                    value='Remove' />
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>

Here is the JS

<script>

    function Remove(button) {
        //Determine the reference of the Row using the Button.
        var row = $(button).closest("TR");
        var name = $("TD", row).eq(0).html();
        //console.log(row + name);

            
        var index = 0;
        var table = $("#tblPart")[0];
        //Delete the Table row using it's Index.
        table.deleteRow(row[0].rowIndex);

    }
        </script>

Thank you for your assistance.

>Solution :

When you delete the row, all subsequent rows index is wrong, you need to re-index the remaining rows on delete. If you for instance delete row with index 3 and then you have rows 0-2 and rows 4-6, 4-6 will be left out since there is no index 3, to fix this, you need to reindex the id and name attributes on the form fields after delete, also, you should consider using const and let in your function as var should be used for global variables, lastly, I added jquery tag to your post as you are mixing javascript and jquery in your code:

function Remove(button) {
        //Determine the reference of the Row using the Button.
        const row = $(button).closest("TR");
        const name = $("TD", row).eq(0).html(); //this seems unnecessary    
        let index = 0; //this seems unnecessary
        const table = $("#tblPart")[0];
        //Delete the Table row using it's Index.
        table.deleteRow(row[0].rowIndex);
        
        //re-index
        $('#tblPart tbody tr').each(function(i, el) {
             //get the form fields
             const $partnuminput = $(el).find('input[name*="PartNum"]');
             const $quantityinput = $(el).find('input[name*="Quantity"]');
             
             //use the iterator parameter of .each to set the index correctly
             $partnuminput.attr("name", $partnuminput.attr("name).replace(/\d+/g, i);
             $partnuminput.attr("id", $partnuminput.attr("id").replace(/\d+/g, i);
             $quantityinput.attr("name", $partnuminput.attr("name).replace(/\d+/g, i);
             $quantityinput.attr("id", $partnuminput.attr("id").replace(/\d+/g, i);
             
        });
        
    }