I want to delete every row from the table using javascirpt Here's the code I tried using .remove function but it did'nt work out...
HTML TABLE CODE
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT CODE
if(tablebody.children.length > 0)
{
for (let i = 0; i < tablebody.children.length; i++)
{
tablebody.children[i].remove()
}
}
This will get all tr (rows) for the tables body. Then it will delete (remove) any that it finds
let trs = document.querySelectorAll('#table_body tr');
trs.forEach((tr)=>{
tr.remove();
});
Find all table rows, iterate over them using for of then remove each row with Element.remove().
const rows = document.querySelectorAll("#table_body tr");
for (const row of rows) {
row.remove();
}<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td>mess fee</td>
<td>2500</td>
<td>0</td>
<td>
<input
type="number"
id="remaing_amount"
name="remaing_amount[]"
class="form-control"
placeholder="Enter Paid Amount"
/>
</td>
</tr>
</tbody>
</table>
</div>If you want to delete all tr maybe you should do something like this
document.getElementById('table_body').innerHTML = ''<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>