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 >
                                            <table >
                                                <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[]"  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()
                       } 
            }

CodePudding user response：

Explination

This will get all tr (rows) for the tables body. Then it will delete (remove) any that it finds

Solution

let trs = document.querySelectorAll('#table_body tr');

trs.forEach((tr)=>{
        tr.remove();
});

CodePudding user response：

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 >
  <table >
    <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[]"
            
            placeholder="Enter Paid Amount"
          />
        </td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

If you want to delete all tr maybe you should do something like this

document.getElementById('table_body').innerHTML = ''

<div >
  <table >
    <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[]"  placeholder="Enter Paid Amount"></td>
      </tr>

    </tbody>
  </table>
</div>

CodePudding user response：

Try this way...

const tBody = document.querySelector('#table_body');
const tRow =document.querySelector('#table_body tr')
if (tBody.contains(tRow) {
 tRow.remove();
}

CodePudding user response：

try this code:

<div >
   <table >
      <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 id = "row1">
            <td>2</td>
            <td> mess fee </td>
            <td> 2500 </td>
            <td>0 </td>
            <td>  <input type="number" id="remaing_amount" name="remaing_amount[]"  placeholder="Enter Paid Amount"></td>
         </tr>
      </tbody>
   </table>
   <button onclick = "deletetr()"> 
   Click here
   </button> 
   <script> 
      function deletetr() {
          document.getElementById("row1").remove();
      }
   </script> 
</div>