jQuery delete table column

Question

I have a table and cannot change markup:

<table>
    <thead>
        <tr>
            <th>
                blablabla
            </th>
            <th>
                blablabla
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                efgd
            </td>
            <td>
                efghdh
            </td>
        </tr>
    </tbody>
</table>

Here is my function, which should delete a column. It is called on cell click:

function (menuItem, menu) {
    var colnum = $(this).prevAll("td").length;

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

But it deletes something else, not the column I wanted to delete. Where am I wrong?

Answer 1

This uses .delegate() for the handler, and a more native approach using cellIndex to get the cell index that was clicked, and cells to pull the cell from each row.

Example: http://jsfiddle.net/zZDKg/1/

$('table').delegate('td,th', 'click', function() {
    var index = this.cellIndex;
    $(this).closest('table').find('tr').each(function() {
        this.removeChild(this.cells[ index ]);
    });
});

Answer 2

If you have the static html (consider table with 10 columns),

then remove the first column along with header using below:

 $('#table th:nth-child(1),#table td:nth-child(1)').remove();

now the new table will have 9 columns , now you can remove any column using the number:

 $('#table th:nth-child(7),#table td:nth-child(7)').remove();