Get index from table (the tr has no ID)

I'm dynamically creating and appending into a table, a <tr> and a <td> with the following code:

$("#table1").append(
        '<tr>'+
        '<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'</td>'+
                    '</开发者_StackOverflow社区tr>');

It's Ok so far: I can load the Td data into another fields that I want and there's no problem on creating it.

But beyond creating it I must allow the user to remove the <td> dynamically, but as you can see, there's no ID to look for. What's the better way to allow the user to remove the <td> ?

Im trying the following code:

$("#table1>tbody>td>tr."+teste+"").remove();

But no success! The test variable is a number that I automatically define for the register.

Any help?

If test is the 0-based index of the row you want to remove...

$("#table1>tbody>tr:eq("+test+")").remove();

Set a unique id attribute when you dynamically create each cell.

<tr id="uniqueID"><td>Cell Content</td></tr>

Then use simple jquery to remove the row by id.

$('#uniqueID').remove(); 

Your remove code assumes there is a class on the TD. You'll have to target it with :eq() by referencing the value in your hidden field. If the value in the hidden field is a number (the index of the td the user selected = your counter), you could try something like this:

var hiddenFieldValue = $('input.hiddenFieldClassName').val();

$("#table1>tbody>tr>td:eq("+hiddenFieldValue+")").remove();

You could add a little x next to each driver name that will delete that td by changing your code a bit:

$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'<span onclick="$(this.parentNode).remove()">x</span></td>'+'</tr>');

Or you could add another function to the click handler that you are binding to each <td> that will display a message in a predefined <div> asking the user if s/he wants to delete that element:

$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);askDelete(this);">'+$("#DRVR_NAME").val()+'</td>'+'</tr>');

and then define a message area (id = 'messageArea') somewhere in your HTML and the following function in your code:

askDelete(el){
    var MA=$('#messageArea');
    MA.empty();
    MA.html('Do you want to delete ' + el.innerHTML + '?<br>').append('<span id="confirmDelete">delete</span>&nbsp;<span id="cancelDelete">cancel</span>')
    MA.find('#confirmDelete').click(function(){$(el).remove();});
    MA.find('#cancelDelete').click(function(){MA.empty();})
}

then style your delete and cancel buttons as you wish.