jQuery remove HTML table column

Question

I have a HTML table like this:

<table border="1">     <tbody>         <tr>             <td><a href="#" class="delete">DELETE ROW</a>COL 1</td>             <td><a href="#" class="delete">DELETE COL</a>COL 2</td>             <td><a href="#" class="delete">DELETE COL</a>COL 3</td>             <td><a href="#" class="delete">DELETE COL</a>COL 4</td>             <td><a href="#" class="delete">DELETE COL</a>COL 5</td>             <td><a href="#" class="delete">DELETE COL</a>COL 6</td>         </tr>         <tr>             <td>ROW 1</td>             <td>ROW 1</td>             <td>ROW 1</td>             <td>ROW 1</td>             <td>ROW 1</td>             <td>ROW 1</td>         </tr>         <tr>             <td>ROW 2</td>             <td>ROW 2</td>             <td>ROW 2</td>             <td>ROW 2</td>             <td>ROW 2</td>             <td>ROW 2</td>         </tr>     </tbody> </table> 

I need a function to remove the specified column when I click on the link with the class "delete". Can you help ?

Answer 1

After a few years, it's probably time to update the answer on this question.

// Listen for clicks on table originating from .delete element(s) $("table").on("click", ".delete", function ( event ) {     // Get index of parent TD among its siblings (add one for nth-child)     var ndx = $(this).parent().index() + 1;     // Find all TD elements with the same index     $("td", event.delegateTarget).remove(":nth-child(" + ndx + ")"); });