Solution 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>

Problem :

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>

Comments

Comment posted by stackoverflow.com/questions/48161460/…

It seems like this can be achieved using css. There are a couple of interesting options in this stackoverflow item that could help you:

By

Leave a Reply

Your email address will not be published. Required fields are marked *