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