Array filtering

Question

There is a table with data and an array. Data from this table is stored in an array. How can I remove this object from an array by clicking on the "delete" button?

var contacts = [{name:"Mark",surname:"Otto",username:"@mdo"}, {name:"Jacob",surname:"Thornton",username:"@fat"}, {name:"Larry",surname:"the Bird",username:"@twitter"}] <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Имя</th> <th scope="col">Фамилия</th> <th scope="col">Username</th> <th scope="col">Очистить</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td><button>удалить</button></td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td><button>удалить</button></td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td><button>удалить</button></td> </tr> </tbody> </table>

Here, in the example, they are not connected, they are connected in the application that I am trying to write.
There is a form with the name, last name, nickname after filling in which the user presses the add button, after which the data is written to the contacts array and a table is drawn from it using another function.
Now I have added a "delete" button to the table in front of each contact and I want this contact to be removed from the array by clicking on it.
@Grundy is all here, updateTable plnkr.co/edit/1bwPlt0nTnDL3pTf17EF?p=preview function

Ilia Brykin Ilia Brykin 1,229 2 12 · Answer 1 · 2018-06-04T12:41:23

 var contacts = [{ name: "Mark", surname: "Otto", username: "@mdo" }, { name: "Jacob", surname: "Thornton", username: "@fat" }, { name: "Larry", surname: "the Bird", username: "@twitter" } ]; buildTable(); function buildTable() { let tableTbody = $(".table.table-striped tbody"); contacts.forEach(function(item, index) { let tr = `<tr > <th scope="row">${index + 1}</th> <td>${item.name}</td> <td>${item.surname}</td> <td>${item.username}</td> <td><button data-index="${index}">удалить</button></td> </tr>`; tableTbody.append(tr); }); initEvent(); } function initEvent() { $(".table.table-striped tbody button").click(deleteTr); } function deleteTr() { $(this).closest("tr").remove(); contacts[$(this).data("index")].flagRemoved = true; console.log(contacts); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Имя</th> <th scope="col">Фамилия</th> <th scope="col">Username</th> <th scope="col">Очистить</th> </tr> </thead> <tbody> </tbody> </table>

Array filtering

1 answer 1

More articles: