How to delete table rows uisng javascript

Question

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()
                       } 
            }

children is a live list. While you remove elements, the subsequent element indexes decrease, meaning you miss elements. Don't use index-based looping for removing elements. — connexo
– connexo, Commented Apr 27, 2022 at 10:15
Please take at least basic care of code formatting in your questions on StackOverflow. — connexo
– connexo, Commented Apr 27, 2022 at 10:17

X3R0 · Accepted Answer · 2022-04-27 09:25:48Z

1

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();
});

answered Apr 27, 2022 at 9:25

X3R0

6,4152 gold badges19 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Asplund · Accepted Answer · 2022-04-27 09:30:01Z

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>

R4ncid · Accepted Answer · 2022-04-27 09:26:58Z

0

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>

answered Apr 27, 2022 at 9:26

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

2 Comments

Asplund Over a year ago

OP wanted to remove all rows, not everything inside the table body

R4ncid Over a year ago

@Undo what else there is in a tbody tag?

John Shot · Accepted Answer · 2022-04-27 09:35:29Z

0

Try this way...

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

answered Apr 27, 2022 at 9:35

John Shot

3064 silver badges11 bronze badges

Comments

Nensi Gondaliya · Accepted Answer · 2022-04-27 12:05:04Z

try this 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 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[]" class="form-control" placeholder="Enter Paid Amount"></td>
         </tr>
      </tbody>
   </table>
   <button onclick = "deletetr()"> 
   Click here
   </button> 
   <script> 
      function deletetr() {
          document.getElementById("row1").remove();
      }
   </script> 
</div>

Collectives™ on Stack Overflow

How to delete table rows uisng javascript

5 Answers 5

Explination

Solution

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Explination

Solution

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related