JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th>n.</th>
<th>Nome</th>
<th>Cognome</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: lista">
<tr>
<td data-bind="text: $index()+1"></td>
<td>
<input type="text" data-bind="value:Nome, attr: {name: 'Lista[' + $index() + '].Nome'}" />
</td>
<td>
<input type="text" data-bind="value:Nome, attr: {name: 'Lista[' + $index() + '].Nome'}" />
</td>
<td>
<input type="button" value="Rimuovi" data-bind="click: function() { $root.rimuoviInvitato($data); }" />
</td>
</tr>
</tbody>
</table>
<input type="button" data-bind="click: $root.aggiungiInvitato" value="Aggiungi invitato">
JavaScript
var viewModel = (function () {
//Lista è un array che inizialmente non contiene elementi
function viewModel() {
this.lista = ko.observableArray([]);
}
viewModel.prototype.rimuoviInvitato = function (invitato) {
//rimuovo dalla lista un invitato esistente
this.lista.remove(invitato);
};
viewModel.prototype.aggiungiInvitato = function () {
//aggiungo un nuovo invitato
this.lista.push({
Nome: '',
Cognome: ''
});
};
return viewModel;
})();
//applico il mio viewModel alla UI
ko.applyBindings(new viewModel());