Xóa 1 phần thẻ tr trong nhiều thẻ tr bằng jQuery

[Tap_code]

Giờ e có 2 thẻ tr như sau

<tr>
  <td>
       <p>1</p>
       <p>Jones</p>
       <p>USA</p>
       <button class="delete">Delete</button>
   </td>
</tr>
<tr>
  <td>
       <p>2</p>
       <p>David</p>
       <p>USA</p>
       <button class="delete">Delete</button>
   </td>
</tr>

Giờ e muốn khi ấn button “Delete” ở tr thứ 2 thì chỉ tr thứ 2 bị xóa thôi còn tr đầu vẫn còn nguyên. Bác nào chỉ giúp e với. E dùng remove() trong jQuery mà nó xóa cả 2 tr

[htwap (lu___va_sa__)]

bạn phải chỉ định đúng tr mà bạn cần xoá:

$(document).on('click', 'button.delete', function(e) {
  $(e).closest('tr').remove();
});

[Tap_code]

Cảm ơn bác đã giúp. Mà e có 1 vấn đề bác xem giúp e luôn được không. Nếu mình xóa phần tử thứ 2 thì ok nhưng mà khi xóa phần tử thứ nhất đi thì có cách nào cái số 2 nó load lại thành số 1 không ạ. Kiểu như load lại số thứ tự ấy

[htwap (lu___va_sa__)]

ca này cũng khó nhỉ, bạn thử viết như này xem:

$(document).on('click', 'button.delete', function() {
  let $tr = $(this).closest('tr');
  $tr.nextAll('tr').each(function() {
    let $indexEl = $(this).find('p').first();
    $indexEl.html(parseInt($indexEl.html()) - 1);
  });
  $tr.remove();
});