Remove row change next all row id in table jquery

Question

Im using yii-editable-grid

Example:

<tbody>
    <tr id='0'> <td>Row 1</td> <td>Delete</td></tr>
    <tr id='1'> <td>Row 2</td> <td>Delete</td></tr>
    <tr id='2'> <td>Row 3</td> <td>Delete</td></tr>
    <tr id='3'> <td>Row 4</td> <td>Delete</td></tr>
</tbody>

When Delete Row 2 should change the ID of next row in a table

<tbody>
      <tr id='0'> <td>Row 1</td> </tr>      
      <tr id='1'> <td>Row 3</td> </tr>
      <tr id='2'> <td>Row 4</td> </tr>
 </tbody>

Please anyone help to resolve this ?

Answer 1

try

$("tr").click(function () {
    $(this).remove();
    $("tr").prop("id", function () {
        return $(this).index();

    });
});

DEMO

use nextAll(), to stop unwanted changes

$("tr").click(function () {
    var id = this.id;
    $(this).nextAll("tr").prop("id", function () {
        return id++;
    });
    $(this).remove();

});

DEMO