CODEWITHSUNDEEP
javascriptjquery
user5405873
user5405873

Reputation:

How to remove last column from html table using JavaScript and jQuery?

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>

Upvotes: 0

Views: 1646

Answers (3)

Eddie
Eddie

Reputation: 26844

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

The rest of trs has 5 tds.

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>

Upvotes: 1

brk
brk

Reputation: 50291

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>

Upvotes: 0

Dipak
Dipak

Reputation: 2308

$(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>

Upvotes: 0

Related Questions