Quiero eliminar todas las filas de la tabla usando javascirpt Aquí está el código que probé usando la función .remove pero no funcionó...
CÓDIGO DE TABLA HTML
<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>CÓDIGO JAVASCRIPT
if(tablebody.children.length > 0) { for (let i = 0; i < tablebody.children.length; i++) { tablebody.children[i].remove() } }Esto obtendrá todas las tr (filas) para el cuerpo de las tablas. Luego eliminará (eliminará) cualquiera que encuentre
let trs = document.querySelectorAll('#table_body tr'); trs.forEach((tr)=>{ tr.remove(); });Encuentre todas las filas de la tabla, itere sobre ellas usando for of y luego elimine cada fila con 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>Si desea eliminar todos los tr, tal vez debería hacer algo como esto
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>