user1752078
user1752078

Reputation: 95

Remove a column from a table using jQuery

In my table the td's in first row contains an image. When I click the image I want to delete the entire columns (td's) below the image using jQuery.

How can I do this?

<table  border="1" >  
        <tr>
        <td >
        <img  src="addButton.jpg" id='addButton' />
        </td> 
        <td >
        <img  src="addButton.jpg" id='addButton' /></td>
        </tr>
        <tr>
        <td >Result1
        </td> 
        <td >Result2</td>
        </tr>
        <tr>
        <td >Result1
        </td> 
        <td >Result2>/td>
        </tr>
    </table>

Upvotes: 1

Views: 2306

Answers (2)

Alexander
Alexander

Reputation: 23537

One generic way I can think of.

$("td img").click(function() {
    var $td = $(this).closest("td");
    var index = $td.index() + 1;
    $td.closest("table").find("td:nth-child(" + index + ")").remove();
});​

Upvotes: 2

ba1ar
ba1ar

Reputation: 534

Give your td the same class names that are not applied anywhere else. then after

$(image).Click(function(){
     $('.classname').remove();
});

Upvotes: 1

Related Questions