JQuery Remove Table Row OnClick of Button
by Avinashullal
HTML
<table id="tblReview" style="width:30%" class="table table-bordered">
<tbody>
<tr>
<th>Resource</th>
<th>Planned</th>
<th>Actual</th>
</tr>
<tr>
<td>SP2010\marimuthua</td>
<td style="background-color: rgb(143, 207, 104);">369</td>
<td>610</td>
<td>
<button type="button" id="VSbtnSubmit" class="btnsubmit">Submit</button>
</td>
</tr>
<tr>
<td>SP2010\marimuthua</td>
<td style="background-color: rgb(143, 207, 104);">738</td>
<td>1619</td>
<td>
<button type="button" id="VSbtnSubmit" class="btnsubmit">Submit</button>
</td>
</tr>
<tr>
<td>SP2010\marimuthua</td>
<td style="background-color: rgb(143, 207, 104);">2952</td>
<td>10079</td>
<td>
<button type="button" id="VSbtnSubmit" class="btnsubmit">Submit</button>
</td>
</tr>
<tr>
<td>SP2010\marimuthua</td>
<td style="background-color: rgb(143, 207, 104);">3321</td>
<td>11889</td>
<td>
<button type="button" id="VSbtnSubmit" class="btnsubmit">Submit</button>
</td>
</tr>
<tr>
<td>SP2010\spfarm</td>
<td style="background-color: rgb(143, 207, 104);">3441</td>
<td>12009</td>
<td>
<button type="button" id="VSbtnSubmit" class="btnsubmit">Submit</button>
</td>
</tr>
<tr>
<td>SP2010\spfarm</td>
<td style="background-color: rgb(143, 207, 104);">1111</td>
<td>1</td>
<<td>
<button type="button" id="VSbtnSubmit" class="btnsubmit">Submit</button>
</td>
</tr>
</tbody>
</table>
CSS
table td {
border: 1px solid #ccc;
padding: 5px;
}
JavaScript
$(document).on('click', '.btnsubmit', function (e) {
$(this).parents('tr').addClass('selected');
selectedRow = $(this).parents('tr');
var td = $(selectedRow).children('td');
alert(td[0].textContent);
selectedRow.remove();
});