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>
-
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');