how to use knockout.js to add one item or delete an item by clicking

Question

I want to add an Item by clicking "Add one Item" and remove an Item by clicking "Remove One Item" I don't know where should I use data-bind and how can I add to the People array in my code. please help me.

this is my code:

<div data-bind="foreach: { data: people, as: 'person'}">
<!-- ko foreach: person -->
<div class="item form-collection-group " >
    <div class="title active">
        <span class="accordion-title" data-bind="text : fullName"> title </span>
    </div>
    <div class="content form-collection-content-holder active">               

                    <label class=""> first name </label>
                    <div class="ui input">
                        <input type="text" data-bind="textInput: lastName" >
                    </div>
                    <label class=""> lastName </label>
                    <div class="ui  input">
                        <input  data-bind="textInput: firstName" type="text"  >
                    </div>
    </div>
</div>
<br>
<!-- /ko -->
</div>
<br>
<button>add one field</button>
<button>remove one field</button>

 <script>
 var ViewModel = function() {
 var self = this;
 self.firstName = ko.observable('');
 self.lastName = ko.observable('');
 self.fullName = ko.computed(function() {
    return self["firstName"].call() + " " + self.lastName() + " Title ";
   }, self);
 };

 ko.applyBindings({
    people: [
                     [new ViewModel()] ,[new ViewModel()] 
             ]
 });

 </script>

Answer 1

so typically when adding and deleting items you are going to want to use and observable array. http://knockoutjs.com/documentation/observableArrays.html . your add button click binding will push a new item to the array. then the delete button will call the parent remove from array. here is a working fiddle. http://jsfiddle.net/LkqTU/33457/ or you can run the snippet below

 function person(firstName, lastName) { var self = this; this.firstName = ko.observable(firstName); this.lastName = ko.observable(lastName); this.fullName = ko.pureComputed(function() { return self.firstName() + " " + self.lastName(); }, this); } function model() { var self = this; this.firstName = ko.observable(''); this.lastName = ko.observable(''); this.people = ko.observableArray(); this.add = function() { self.people.push(new person(self.firstName(), self.lastName())); } this.remove = function(row) { self.people.remove(row); } } var mymodel = new model(); $(document).ready(function() { ko.applyBindings(mymodel); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-bind="foreach: people"> Title: <span class="accordion-title" data-bind="text : fullName"> </span> <button data-bind="click: $parent.remove">X</button> </div> <div> <input data-bind="textInput: firstName" placeholder="first name" /> <input data-bind="textInput: lastName" placeholder="last name" /> <button data-bind="click: add">add</button> </div>