Good evening all. I have a really random issue that I can't seem to get beyond, which is frustrating me to no end. I basically took working HTML/PHP/jQuery code from another page of mine, modified field names and such, and turned it loose. I have an "Add Row" button that dynamically adds an input row to my table, with each iteration incrementing a counter variable that is added to field names and such to ensure uniqueness. The row also contains a "Delete Row" button, which is what's acting odd.
If I open my page, click "Add Row" 10 times, I can label them 1-10 in my textarea. The appropriate row deletes with each click... except the last row I try to delete. I can click the Delete button until my finger cramps - no difference. Here is my jQuery code:
$(document).ready(function() {
$('#addrow').click(function() {
var count = $('#progyrgoals tr').length;
var ID = count + 1;
var tdclassnum = ID % 2;
if (tdclassnum == 1) {
tdclass = "td1";
} else {
tdclass = "td2";
}
$.post("/jqf/progyroutcomegoals_processajax.php", function(data) {
//alert( "Data Loaded: " + data );
$('#progyrgoals').append('<tr id="' + ID + '"><td class="' + tdclass + '"><select name="progyr' + ID + '"><option value="0">-- Select --</option>' + data + '</select><br /><button type="button" class="dbutton" title="Delete Row">X</button></td><td class="' + tdclass + '"><textarea class="txta6" name="desc' + ID + '"></textarea></td></tr>');
});
$(".dbutton").bind("click", Delete);
function Delete() {
var par = $(this).parent().parent();
par.remove();
};
});
});
Am I doing something that is obviously wrong?
(( I tried to hardcode into JSFiddle in place of my variables and such - it was a no-go. What I did accomplish can be seen here: https://jsfiddle.net/TheJester1977/855toqps/ ))
