jQuery removing an element and its sibling

Question

I have a table that has an even number of rows.

Odd rows are visible and have a delete button in them, even rows are hidden.

Delete should remove a pair, the odd row and the hidden even row.

The following only removes the odd row. How can I remove the odd row and the next sibling?

$('deleteButton').click(function() {
    var $tr = $(this).closest('tr');
    $tr.remove().next('tr').remove();
});

Many thanks

Answer 1

You could use addBack() jQuery method:

$tr.next('tr').addBack().remove();

Answer 2

Remove sibling first as removing the source row first will cause an error when trying to access the sibling of removed row.

$('deleteButton').click(function() {
    var $tr = $(this).closest('tr');
    $tr.next('tr').remove();
    $tr.remove();
});