I'm trying to remove a table row (tr) from a table with a form inside. I'm using this function to do it.
$('.removeStop').click(function() {
$(this).closest('tr').fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});
The fadeTo works fine, but when it goes to remove the row, it goes to the remove function, it goes into an infinite loop "cannot remove undefined".
Maybe it's just some stupid error I made, but I would think if it can fade the whole row, it should be able to remove the same thing.
Any help would be great :)
Edit: Here is the HTML:
<tr align="left">
<td width="100">School: </td>
<td>
<select name="stops[school][0][studentid]" class="combobox" style="display: none; ">
<option value="">Select a school...</option>
<option value="1" selected="selected">Hogwarts School of Wizardry</option><option value="2">Itchy and Scratchy Land</option><option value="3">Springfield Elementary</option> </select><input class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left ui-corner-right inputCustom" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</td>
<td width="70"></td>
<td width="100">Time (24hr): </td>
<td><input class="ui-widget ui-widget-content ui-corner-left ui-corner-right inputCustom" value="15" name="stops[school][0][hr]" style="width:50px;" type="text"> <input class="ui-widget ui-widget-content ui-corner-left ui-corner-right inputCusto开发者_Go百科m" value="01" name="stops[school][0][min]" style="width:50px;" type="text"></td>
<td><a href="#" class="removeStop">Remove</a></td>
</tr>
Try this:
$('.removeStop').click(function(e) {
e.preventDefault();
$(this).closest('tr').fadeOut(400, function () {
$(this).remove();
});
});
精彩评论