use jquery remove table column « Kuro

view

<table id="table-compare" class="table">
    <thead>
      <tr>
      <th>name</th>
        <th class="delete">item1</th>
        <th class="delete">item2</th>
        <th class="delete">item3</th>
        <th class="delete">item4</th>
      </tr>
    </thead>
  <tbody>
      <tr>
        <td class="title">Brand</td>
        <td>Esprit</td>
        <td>Esprit</td>
        <td>Esprit</td>
        <td>Esprit</td>
      </tr>
      <tr>
        <td class="title">Weight</td>
        <td>0.60kg</td>
        <td>0.60kg</td>
        <td>0.60kg</td>
        <td>0.60kg</td>
      </tr>
      <tr>
        <td class="title">Dimensions</td>
        <td>0.00cm x 0.00cm x 0.00cm</td>
        <td>0.00cm x 0.00cm x 0.00cm</td>
        <td>0.00cm x 0.00cm x 0.00cm</td>
        <td>0.00cm x 0.00cm x 0.00cm</td>
      </tr>
      <tr>
        <td class="title">Price</td>
        <td>$10</td>
        <td>$20</td>
        <td>$30</td>
        <td>$40</td>
      </tr>
  </tbody>
</table>

way-1

$(document).ready(function(){
  $("table").on("click", "th.delete", function ( event ) {
      var ndx = $(this).index() ;
    //way1

    remove_table_column(ndx);
  });
});

function remove_table_column(index){
  var target_tr = $('table tr').find('td:eq('+index+'),th:eq('+index+')')
  $(target_tr).fadeOut("slow",function(){
      $(this).remove();
    });
}

way-2

$(document).ready(function(){
  $("table").on("click", "th.delete", function ( event ) {
      var ndx = $(this).index() ;
    //way2

    $('table').removeCol(ndx+1);    
  });
});

$.fn.removeCol = function(col){
    // Make sure col has value

    if(!col){ col = 1; }
    $('tr td:nth-child('+col+'), tr th:nth-child('+col+')', this).remove();
    return this;
};