Reputation: 95
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
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
Reputation: 534
Give your td the same class names that are not applied anywhere else. then after
$(image).Click(function(){
$('.classname').remove();
});
Upvotes: 1