如何使用JavaScript和jQuery从html表中删除最后一列？

Question

I want to remove the last HTML Table column , but it is removing total too.

I want to preserve total row , my current code removing it. (i,e total => 122602 )

Below is my demo:

 $(function(){ $('#remove').click(function(){ $('#showQuotation tr').find('th:last-child, td:last-child').remove(); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="remove" class="btn btn-danger">Remove</button> <table class="table table-bordered" id="showQuotation" style="margin-top: 40px;"> <thead> <tr><th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> <th>Action</th> </tr></thead> <tbody> <tr class="allTheQuotationRow"><td contenteditable="false">2D Board With Tube Lites 5 "Inch" Box</td><td contenteditable="false" class="priceChangeField">470</td><td contenteditable="false" class="quantityChangeField">2</td><td contenteditable="false">940</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">3D Board Immbossed Letter With Led</td><td contenteditable="false" class="priceChangeField">750</td><td contenteditable="false" class="quantityChangeField">2</td><td contenteditable="false">1500</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">Standy Scrolling 2.5 x 6.5</td><td contenteditable="false" class="priceChangeField">1304</td><td contenteditable="false" class="quantityChangeField">2</td><td contenteditable="false">2608</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">Star Flex With Standy 4 x 6.5</td><td contenteditable="false" class="priceChangeField">2218</td><td contenteditable="false" class="quantityChangeField">33</td><td contenteditable="false">73194</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">Star Flex With Standy 4 x 6.5</td><td contenteditable="false" class="priceChangeField">2218</td><td contenteditable="false" class="quantityChangeField">20</td><td contenteditable="false">44360</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr id="lastTotalRow3333"><td contenteditable="false"></td><td contenteditable="false"></td><td contenteditable="false"></td><th>Total Amount</th><td contenteditable="false"></td></tr><tr id="lastTotalRow"><td contenteditable="false">total</td><td contenteditable="false"></td><td contenteditable="false"></td><td contenteditable="false">122602</td></tr></tbody> </table> 

Answer 1

Your last tr only has 4 td s and the last one is the total cell.

The rest of tr s has 5 td s.

Add another td on the last tr your html and this should work. And it makes your HTML table valid.

 $(function(){ $('#remove').click(function(){ $('#showQuotation tr').find('th:last-child, td:last-child').remove(); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="remove" class="btn btn-danger">Remove</button> <table class="table table-bordered" id="showQuotation" style="margin-top: 40px;"> <thead> <tr> <th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> <th>Action</th> </tr> </thead> <tbody> <tr class="allTheQuotationRow"> <td contenteditable="false">2D Board With Tube Lites 5 "Inch" Box</td> <td contenteditable="false" class="priceChangeField">470</td> <td contenteditable="false" class="quantityChangeField">2</td> <td contenteditable="false">940</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">3D Board Immbossed Letter With Led</td> <td contenteditable="false" class="priceChangeField">750</td> <td contenteditable="false" class="quantityChangeField">2</td> <td contenteditable="false">1500</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">Standy Scrolling 2.5 x 6.5</td> <td contenteditable="false" class="priceChangeField">1304</td> <td contenteditable="false" class="quantityChangeField">2</td> <td contenteditable="false">2608</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">Star Flex With Standy 4 x 6.5</td> <td contenteditable="false" class="priceChangeField">2218</td> <td contenteditable="false" class="quantityChangeField">33</td> <td contenteditable="false">73194</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">Star Flex With Standy 4 x 6.5</td> <td contenteditable="false" class="priceChangeField">2218</td> <td contenteditable="false" class="quantityChangeField">20</td> <td contenteditable="false">44360</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr id="lastTotalRow3333"> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false"></td> <th>Total Amount</th> <td contenteditable="false"></td> </tr> <tr id="lastTotalRow"> <td contenteditable="false">total</td> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false">122602</td> <td contenteditable="false"></td> </tr> </tbody> </table> 

Answer 2

 $(function(){ $('#remove').click(function(){ $('#showQuotation tr').find('th:last-child, td:last-child').remove(); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="remove" class="btn btn-danger">Remove</button> <table class="table table-bordered" id="showQuotation" style="margin-top: 40px;"> <thead> <tr> <th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> <th>Action</th> </tr> </thead> <tbody> <tr class="allTheQuotationRow"> <td contenteditable="false">2D Board With Tube Lites 5 "Inch" Box</td> <td contenteditable="false" class="priceChangeField">470</td> <td contenteditable="false" class="quantityChangeField">2</td> <td contenteditable="false">940</td> <td contenteditable="false"> <span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span> </td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">3D Board Immbossed Letter With Led</td> <td contenteditable="false" class="priceChangeField">750</td> <td contenteditable="false" class="quantityChangeField">2</td> <td contenteditable="false">1500</td> <td contenteditable="false"> <span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span> </td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">Standy Scrolling 2.5 x 6.5</td> <td contenteditable="false" class="priceChangeField">1304</td> <td contenteditable="false" class="quantityChangeField">2</td> <td contenteditable="false">2608</td> <td contenteditable="false"> <span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span> </td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">Star Flex With Standy 4 x 6.5</td> <td contenteditable="false" class="priceChangeField">2218</td> <td contenteditable="false" class="quantityChangeField">33</td> <td contenteditable="false">73194</td> <td contenteditable="false"> <span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span> </td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">Star Flex With Standy 4 x 6.5</td> <td contenteditable="false" class="priceChangeField">2218</td> <td contenteditable="false" class="quantityChangeField">20</td> <td contenteditable="false">44360</td> <td contenteditable="false"> <span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span> </td> </tr> <tr id="lastTotalRow3333"> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false"></td> <td>Total Amount</td> <td contenteditable="false"></td> </tr> <tr id="lastTotalRow"> <td contenteditable="false">total</td> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false">122602</td> <td contenteditable="false"></td> </tr> </tbody> </table> 

Answer 3

Update your selector with tr:not(#lastTotalRow) like:

$('#showQuotation tr:not(#lastTotalRow)').find('th:last-child, td:last-child').remove();

Working code:

 $(function(){ $('#remove').click(function(){ $('#showQuotation tr:not(#lastTotalRow)').find('th:last-child, td:last-child').remove(); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="remove" class="btn btn-danger">Remove</button> <table class="table table-bordered" id="showQuotation" style="margin-top: 40px;"> <thead> <tr><th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> <th>Action</th> </tr></thead> <tbody> <tr class="allTheQuotationRow"><td contenteditable="false">2D Board With Tube Lites 5 "Inch" Box</td><td contenteditable="false" class="priceChangeField">470</td><td contenteditable="false" class="quantityChangeField">2</td><td contenteditable="false">940</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">3D Board Immbossed Letter With Led</td><td contenteditable="false" class="priceChangeField">750</td><td contenteditable="false" class="quantityChangeField">2</td><td contenteditable="false">1500</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">Standy Scrolling 2.5 x 6.5</td><td contenteditable="false" class="priceChangeField">1304</td><td contenteditable="false" class="quantityChangeField">2</td><td contenteditable="false">2608</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">Star Flex With Standy 4 x 6.5</td><td contenteditable="false" class="priceChangeField">2218</td><td contenteditable="false" class="quantityChangeField">33</td><td contenteditable="false">73194</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">Star Flex With Standy 4 x 6.5</td><td contenteditable="false" class="priceChangeField">2218</td><td contenteditable="false" class="quantityChangeField">20</td><td contenteditable="false">44360</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr id="lastTotalRow3333"><td contenteditable="false"></td><td contenteditable="false"></td><td contenteditable="false"></td><th>Total Amount</th><td contenteditable="false"></td></tr><tr id="lastTotalRow"><td contenteditable="false">total</td><td contenteditable="false"></td><td contenteditable="false"></td><td contenteditable="false">122602</td></tr></tbody> </table> 

Answer 4

It is removing total amount value because it is the last column in that row.

You get the index of the column which need to be removed.Then use eq and remove to remove the element

 $(function() { $('#remove').click(function() { var getColIndex = $('#showQuotation tr').find('th:last-child').index(); $('#showQuotation tr th:eq(' + getColIndex + ')').remove(); $('#showQuotation tr').each(function(e, v) { $(this).find('td:eq(' + getColIndex + ')').remove() }) }); }); 

 $(this).closest('table').find('thead tr th:eq('+colnum+')').remove(); $(this).closest("table").find('tbody tr td:eq('+colnum+')').remove(); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="remove" class="btn btn-danger">Remove</button> <table class="table table-bordered" id="showQuotation" style="margin-top: 40px;"> <thead> <tr> <th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> <th>Action</th> </tr> </thead> <tbody> <tr class="allTheQuotationRow"> <td contenteditable="false">2D Board With Tube Lites 5 "Inch" Box</td> <td contenteditable="false" class="priceChangeField">470</td> <td contenteditable="false" class="quantityChangeField">2</td> <td contenteditable="false">940</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">3D Board Immbossed Letter With Led</td> <td contenteditable="false" class="priceChangeField">750</td> <td contenteditable="false" class="quantityChangeField">2</td> <td contenteditable="false">1500</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">Standy Scrolling 2.5 x 6.5</td> <td contenteditable="false" class="priceChangeField">1304</td> <td contenteditable="false" class="quantityChangeField">2</td> <td contenteditable="false">2608</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">Star Flex With Standy 4 x 6.5</td> <td contenteditable="false" class="priceChangeField">2218</td> <td contenteditable="false" class="quantityChangeField">33</td> <td contenteditable="false">73194</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr class="allTheQuotationRow"> <td contenteditable="false">Star Flex With Standy 4 x 6.5</td> <td contenteditable="false" class="priceChangeField">2218</td> <td contenteditable="false" class="quantityChangeField">20</td> <td contenteditable="false">44360</td> <td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td> </tr> <tr id="lastTotalRow3333"> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false"></td> <th>Total Amount</th> <td contenteditable="false"></td> </tr> <tr id="lastTotalRow"> <td contenteditable="false">total</td> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false">122602</td> </tr> </tbody> </table>