Question

I have a table with a delete link in the thead, when this link is clicked I want to remove the whole column (and fade out) including the tbody.

Example of table:

<table class="example" id="dnd-example">
    <thead>
        <tr>
            <th>Column A <a href="" class="delsite" rel="1">x</a></th>
            <th>Column B <a href="" class="delsite" rel="2">x</a></th>
            <th>Column C <a href="" class="delsite" rel="3">x</a></th>
        </tr>
    <tbody>
        <td>213</td>
        <td>213</td>
        <td>213</td>
    </tbody>
</table>

Code I’ve tried to adapt some I used for removing a row by changing the tr to td but its not working for columns.

$(".delsite").click(function() { 
    var id =$(this).attr('rel');
    $(this).closest('td').fadeOut("normal", function() { $(this).remove(); });
    //
    //
});

Answer 1

http://jsfiddle.net/zerkms/tyqAX/1/

$('#dnd-example .delsite').click(function(e) {
    e.preventDefault();

    var index = $(this).parent().index();

    $('tr', '#dnd-example').find('td:eq(' + index + '), th:eq(' + index + ')').hide();
});​