Manny Calavera Manny Calavera - 2 months ago 17
jQuery Question

jQuery remove HTML table column

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

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 + ")");
});
Comments