How to remove all rows dynamically, where dropdownlist value is null, or empty in razor pages?

1. Explaination

I am inserting invoice row values dynamically, but, for simplicity, i want to remove all the rows that have not been used.

I can already remove the rows, one by one, by clicking on a right side “remove” button.

2. Question

How can i remove all the empty rows on submit/save button click?

3. The html table code

                <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                <div class="row">
                    <div class="col-md-8 border-0">
                        <table id="table1" border="0">
                            <thead>
                                <tr style="font-size:80%;">
                                    <th >Product</th>
                                    <th >Qty</th>
                                    <th >Price</th>
                                    <th >Sum</th>                                        
                                    <th class="d-print-none">...</th>
                                </tr>
                            </thead>

                            <tbody>
                                @for (int i = 0; i < Model.InvList.Count(); i++)
                                {
                                    <tr class="border-bottom">
                                                                                
                                        <td>
                                            <select asp-for="@Model.InvList[@i].ProdId" class="form-control Product" 
                                            name="InvList[@i].ProdId" onchange="setTotal()" data-val="true" data-val-required="Value can not be null.">
                                                <option value="" selected>--- Product ---</option>
                                                @foreach (var item in Model.SHRL)
                                                {
                                                    <option value="@item.ProdId"
                                                            qty="@Convert.ToInt32(item.Qty)"
                                                            [email protected](item.Price)"
                                                            sum="@Convert.ToInt32(item.Sum)">
                                                        @item.ProdName
                                                    </option>
                                                }
                                            </select>
                                            <span asp-validation-for="@Model.InvList[@i].ProdId" class="text-danger"></span>
                                        </td>
                                        <td>
                                            <input asp-for="@Model.InvList[@i].Qty" class="form-control qty" style="font-size:80%;" />
                                            <span asp-validation-for="@Model.InvList[@i].Qty" class="text-danger"></span>
                                        </td>
                                        <td>
                                            <input asp-for="@Model.InvList[@i].Price" class="form-control price" type="number" style="font-size:80%;" />
                                            <span asp-validation-for="@Model.InvList[@i].Price" class="text-danger"></span>
                                        </td>
                                        <td>
                                            <input asp-for="@Model.InvList[@i].Sum" class="form-control sum" type="number" style="font-size:80%;" />
                                            <span asp-validation-for="@Model.InvList[@i].Sum" class="text-danger"></span>
                                        </td>
                                        
                                        <td>
                                            <input class="form-control btn btn-sm btn-danger font-weight-bold" type="button" value="X" onclick="ob_adRows.delRow(this);setTotal();" style="max-width:80px;" />
                                        </td>
                                    </tr>
                                }                                   
                            </tbody>

                            <tfoot>
                                <tr style="font-size:80%;">
                                    
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary save2">
                                            Save
                                        </button>
                                    </td>                                       
                                    <td>
                                    
                                    </td>
                                    <td>
                                       
                                    </td>
                                    <td></td>
                               <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                 
                </div>
            </form>
  1. The javascript used to remove the rows one by one

         function adRowsTable(id) {
             var table = document.getElementById(id);
             var me = this;
             if (document.getElementById(id)) {
                 var row1 = table.rows[1].outerHTML;
    
                 function setIds() {
                     var tbl_id = document.querySelectorAll('#' + id + ' .tbl_id');
                     for (var i = 0; i < tbl_id.length; i++) tbl_id[i].innerHTML = i + 1;
                 }
    
                 me.addRow = function (btn) {
                     btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1) : table.insertAdjacentHTML('beforeend', row1);
                     setIds();
                 }
    
                 me.delRow = function (btn) {
                     btn.parentNode.parentNode.outerHTML = '';
                     setIds();
                 }
             }
         }
    
         var ob_adRows = new adRowsTable('table1');