Saturday, 24 August 2013

dynamic remove row wont work, only removes first row and not others

dynamic remove row wont work, only removes first row and not others

When i try to remove the first row it works but as i add more rows i cant
delete them. For some reason i can only remove the first row.
here is my html
<table class="pretty property_units" style="width:800px;">
<thead>
<tr>
<th>Bedroom</th>
<th>Bathroom</th>
<th>Square Feet</th>
<th>Price</th>
<th>Available</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="rows">
<td><input type='text' name='bedroom[]' value='0'
class='input-small'></td>
<td><input type='text' name='bath[]' value='0' class='input-small'></td>
<td><input type='text' name='sqrt[]' value='0' class='input-small'></td>
<td><input type='text' name='price[]' value='0' class='input-small'></td>
<td>
<select name='avail[]' class='input-small'>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
</td>
<td><button type="button" class="btn btn-danger btn-small
removeRow">remove</button></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-small btn-primary addrow">add
row</button>
here is my js
<script type="text/javascript">
$(document).ready(function() {
$(".addrow").click(function() {
var tblrow = $('table.property_units tr.rows:last').clone();
$("table.property_units tbody").append(tblrow);
});
$(".removeRow").click(function() {
$(this).closest("tr").remove();
return false;
});
});
</script>

No comments:

Post a Comment