How can I update row indexes in an HTML table after hiding or deleting rows?

Question

I have a table and I need to delete rows and update the first column with index.

The delete function works but I don't have an idea how to update the first column. Do I need to use a for loop?

This is what I've done so far:

const deleteButtons = document.querySelectorAll('.delete');

for (i = 0; i < deleteButtons.length; i++) {
  deleteButtons[i].addEventListener('click', ({ currentTarget }) => {
    currentTarget.parentElement.parentElement.style.display = 'none';
  });
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">

  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Duration</th>
      <th scope="col">Play</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Didn't love</td>
      <td>4:18</td>
      <td><i style="font-size:24px" class="fa love">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>                           </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Keys</td>
      <td>3:51</td>
      <td><i style="font-size:24px" class="fa keys">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Smoking</td>
      <td>5:12</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Foo</td>
      <td>9:10</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">5</th>
      <td>Bar</td>
      <td>10:45</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
  </tbody>
</table>

Answer 1

You just need to iterate over all the rows and update the .textContent property of their first cell:

Array.from(document.querySelectorAll('.delete')).forEach((delBtn) => {
  delBtn.addEventListener('click', ({ currentTarget }) => {
    const tr = currentTarget.parentElement.parentElement;
    const tbody = tr.parentElement;
    
    // Hide this element:
    tr.setAttribute('hidden', true);
    
    // Update all indexes:
    let nextIndex = 0;
    
    Array.from(tbody.children).forEach((row) => {
      if (!row.hasAttribute('hidden')) {
        // Only increment the counter for those that are not hidden;
        row.children[0].textContent = ++nextIndex;
      }
    });
  });
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">

  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Duration</th>
      <th scope="col">Play</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Didn't love</td>
      <td>4:18</td>
      <td><i style="font-size:24px" class="fa love">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>                           </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Keys</td>
      <td>3:51</td>
      <td><i style="font-size:24px" class="fa keys">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Smoking</td>
      <td>5:12</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Foo</td>
      <td>9:10</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">5</th>
      <td>Bar</td>
      <td>10:45</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
  </tbody>
</table>

Alternatively, if you actually delete the row rather than hiding it, using ChildNode.remove(), then you could use CSS Counters to generate those indexes dynamically so that you don't need to update them with JS every time:

Array.from(document.querySelectorAll('.delete')).forEach((delBtn) => {
  delBtn.addEventListener('click', ({ currentTarget }) => {
    currentTarget.parentElement.parentElement.remove();
  });
});

.table {
  counter-reset: index;
}

.indexCell::before {
  counter-increment: index;
  content: counter(index);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">

  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Duration</th>
      <th scope="col">Play</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Didn't love</td>
      <td>4:18</td>
      <td><i style="font-size:24px" class="fa love">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>                           </td>
    </tr>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Keys</td>
      <td>3:51</td>
      <td><i style="font-size:24px" class="fa keys">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Smoking</td>
      <td>5:12</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Foo</td>
      <td>9:10</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Bar</td>
      <td>10:45</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
  </tbody>
</table>