Click an image - remove current table row
I am trying to write a function, where the user can click on an image in a table row and the function removes the row in question. I am performing this on both static and dynamic ("live") data. I am stuck on last part.
-
<script type="text/javascript" src="scripts/jquery-1.2.6.js"></script>
<script language="javascript">
$(document).ready(function()
{
// use this syntax to use if table row is created dynamically
// (ie: code generated after this function has been called initially)
// $('a.imgCell').live("click", function() {
// syntax to use if table row is static
$('a.imgCell').click(function () {
alert ("OK I am getting this far!. ");
// get the ID associted with this table-row.
var myID = $(this).parents('tr').attr("id");
alert("My row is: " + myID);
// this does not work
$(myID).remove();
return true;
});
});
</script>
-
<table id="OrderLineTable">
<thead>
<tr id="OrderLines">
<th>Se.</th>
<th>Code</th>
<th>Del.</th>
<th>Rédac.</th>
</tr>
</thead>
<tbody>
<tr id="row5">
<td>5</td>
<td>GAT</td>
<td>Â Â <a class="imgCell" href="#"><img src="../img/delete.gif"/></a>Â Â </td>
<td>Â Â <a href="#"><img src="../img/edit.gif"/></a>Â Â </td>
</tr>
<tr id="row4">
<td>4</td>
<td>GAT</td>
<td>Â Â <a class="imgCell" href="#"><img src="../img/delete.gif"/></a>Â Â </td>
<td>Â Â <a href="#"><img src="../img/edit.gif"/></a>Â Â </td>
</tr>
</tbody>
</table>