remove html 5 table row containing data- attribute with jquery

Question

I understand how to get the attribute of an table object $('#tableid tr').attr('data-id') that uses HTML5 data- attributes. However when I try to remove the row based on the data-id attribute, it doesn't seem to work.

When I did something like this:

var theRowId = $('#tableid tr').attr('data-id');
$('#tableid tr#'+theRowId).remove();

it didn't work. Html 5 data-attributes should be handled like any other attribute, correct?

Answer 1

You need to pass the Index of the tr you want the data-attribute from

$('#tableid tr:eq(0)'); // First row in table

$('#tableid tr:eq(1)'); // Second row in table

Because there might be multiple rows in the table

var theRowId = $('#tableid tr:eq(1)').attr('data-id'); // Get the Second Row id
$('#tableid tr#'+theRowId).remove();  // Remove the row with id

OR if you know the ID of the Row.. simply do this

$('#tableid tr[data-id="'+theRowId+'"]').remove();