Angular, delete a row from html-table by ID

Question

This time i need help about how to delete a row based the row ID in html-table when delete button clicked. The table data source is from a separated Json file.

The table looks like this : Image Link

<div class="container">
        <table border=1 class="table">
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
            <th>Phone</th>
          </tr>
            <tr *ngFor="let d of data | async" [attr.id]="d.id"> <!--each row id == id-->
                <td>{{ d.id }}</td>
                <td>{{ d.name }}</td>
                <td>{{ d.email }}</td>
                <td>{{ d.age }}</td>
                <td>{{ d.phone }}</td>
                <button id="remove">DELETE ROW</button>
            </tr>
        </table> 
    </div>

Please let me know if more snippets are needed. Thank you.

Show us what did you try instead asking us to do it for you. — anotherdev
– anotherdev, Commented Oct 31, 2017 at 8:10

Asakkour Soufiane · Accepted Answer · 2021-08-03 14:29:14Z

5

<div class="container">
        <table border=1 class="table">
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
            <th>Phone</th>
          </tr>
            <tr *ngFor="let d of data | async" [attr.id]="d.id"> <!--each row id == id-->
                <td>{{ d.id }}</td>
                <td>{{ d.name }}</td>
                <td>{{ d.email }}</td>
                <td>{{ d.age }}</td>
                <td>{{ d.phone }}</td>
                <button id="remove" (click)="deleteRow(d)">DELETE ROW</button>
            </tr>
        </table> 
    </div>

Typescript

deleteRow(d){
    const index = this.data.indexOf(d);
    this.data.splice(index, 1);
}

edited Aug 3, 2021 at 14:29

answered Mar 22, 2019 at 16:28

Asakkour Soufiane

5141 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AddWeb Solution Pvt Ltd · Accepted Answer · 2017-10-31 08:35:43Z

you can add this code in you HTML file

<div class="container">
            <table border=1 class="table">
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Age</th>
                <th>Phone</th>
              </tr>
                <tr *ngFor="let d of data | async" [attr.id]="d.id"> <!--each row id == id-->
                    <td>{{ d.id }}</td>
                    <td>{{ d.name }}</td>
                    <td>{{ d.email }}</td>
                    <td>{{ d.age }}</td>
                    <td>{{ d.phone }}</td>
                    <button id="remove" (click)="deleteRow(d.id)">DELETE ROW</button>
                </tr>
            </table> 
        </div>

And add this code in youe component file

deleteRow(id){
        for(let i = 0; i < this.data.length; ++i){
            if (this.data[i].id === id) {
                this.data.splice(i,1);
            }
        }
    }

John · Accepted Answer · 2017-10-31 08:28:42Z

1

I would add a (click) event on the button and pass 'd' as the parameter. Then in the function that the click calls, I would splice the 'deleted' item.

Code to add (click) event :

<button id="remove" (click)="functionToDeleteItem(d)">DELETE ROW</button>

Example to splice array and remove deleted item:

stackoverflow past example - How do I remove an array item in TypeScript?

Also, unless you are using the id="remove" in the button for some other use like css, I would remove it as it is not needed.

answered Oct 31, 2017 at 8:28

John

464 bronze badges

Collectives™ on Stack Overflow

Angular, delete a row from html-table by ID

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related