javascript function deletes only the first html row

Question

I have this addressbook that prepends new contacts to my . my add button works just fine. When I try to have 2 or more contacts, it seems that my DELETE button works only on whatever is on the first row. but i actually want it to delete the current row where this button is located. By deleting a row I also want my 'contact' array be updated that this contact isn't there anymore. can someone help me correct this?

    var addressBook = (function() {

var contact = [{
    firstName: 'myName',
    lastName: 'myLastName',
    number: '123456789',
    email: '[email protected]'
}];

var table = $('#table');
var tbody = table.find('tbody');
var form = $('#createForm');
var $firstName = form.find('#firstName');
var $lastName = form.find('#lastName');
var $number = form.find('#number');
var $email = form.find('#email');
var $addButton = form.find('#addButton');
var $deleteButton = table.find('#deleteButton');
var $input = table.find(".edit");

$addButton.on('click', addContact);
table.on('click', '#deleteButton', deleteContact);
addedContact();

function addedContact() {
    tbody.html('');
    var length = contact.length;
    for (var i = 0; i < length; i++) {
        tbody.prepend('<tr><td><input class="edit" type="text" value="' + contact[i].firstName + '"></td><td><input class="edit" type="text" value="' + contact[i].lastName  + '"></td><td><input class="edit" type="text" value="' + contact[i].number + '"</td><td><input class="edit" type="text" value="' + contact[i].email + '""></td><td><button id="deleteButton"> DELETE </button></td></tr>');
    }
}

function addContact() {
    var newPerson = {
        firstName: $firstName.val(),
        lastName: $lastName.val(),
        number: $number.val(),
        email: $email.val()
    };
    contact.push(newPerson);
    $firstName.val('');
    $lastName.val('');
    $number.val('');
    $email.val('');
    addedContact()
}

function deleteContact(event) {
    var element = event.target.closest('tr');
    var i = tbody.find('td').index(element);
    contact.splice(i, 1);
    addedContact();
}

return {
    addContact: addContact,
    deleteContact: deleteContact
};
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class = "create">Create contact</button>

<!-- Create Contact Form-->
<div align=center id="createForm">  
        <br><input placeholder="First Name" id="firstName" /><br><br>
        <input placeholder="Last Name" id="lastName" /><br><br>
        <input placeholder="Phone number" id="number" /><br><br>
        <input placeholder="Email Address" type="email" id="email" /><br><br>
        <input id="addButton" type="submit" value="CREATE" /><br><br>
    </div>

<div class = "search">Search contacts</div>

<table id="table">
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Phone Number</th>
        <th>Email Address</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Answer 1

How's this? Looks like in your delete method you were targeting a td instead of a tr and then calling the function used to build rows freom added contact data?

var addressBook = (function() {

  var contact = [{
    firstName: 'myName',
    lastName: 'myLastName',
    number: '123456789',
    email: '[email protected]'
  }];

  var table = $('#table');
  var tbody = table.find('tbody');
  var form = $('#createForm');
  var $firstName = form.find('#firstName');
  var $lastName = form.find('#lastName');
  var $number = form.find('#number');
  var $email = form.find('#email');
  var $addButton = form.find('#addButton');
  var $deleteButton = table.find('#deleteButton');
  var $input = table.find(".edit");

  $addButton.on('click', addContact);
  table.on('click', '#deleteButton', deleteContact);
  addedContact();

  function addedContact() {
    tbody.html('');
    var length = contact.length;
    for (var i = 0; i < length; i++) {
      tbody.prepend('<tr><td><input class="edit" type="text" value="' + contact[i].firstName + '"></td><td><input class="edit" type="text" value="' + contact[i].lastName + '"></td><td><input class="edit" type="text" value="' + contact[i].number + '"</td><td><input class="edit" type="text" value="' + contact[i].email + '""></td><td><button id="deleteButton"> DELETE </button></td></tr>');
    }
  }

  function addContact() {
    var newPerson = {
      firstName: $firstName.val(),
      lastName: $lastName.val(),
      number: $number.val(),
      email: $email.val()
    };
    contact.push(newPerson);
    $firstName.val('');
    $lastName.val('');
    $number.val('');
    $email.val('');
    addedContact()
  }

  function deleteContact(event) {
    var element = event.target.closest('tr');
    element.remove();
  }

  return {
    addContact: addContact,
    deleteContact: deleteContact
  };
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="create">Create contact</button>

<!-- Create Contact Form-->
<div align=center id="createForm">
  <br><input placeholder="First Name" id="firstName" /><br><br>
  <input placeholder="Last Name" id="lastName" /><br><br>
  <input placeholder="Phone number" id="number" /><br><br>
  <input placeholder="Email Address" type="email" id="email" /><br><br>
  <input id="addButton" type="submit" value="CREATE" /><br><br>
</div>

<div class="search">Search contacts</div>

<table id="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Phone Number</th>
      <th>Email Address</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
  </tfoot>
</table>

Answer 2

You add #deleteButton in every row. Since IDs must be unique in a page, when javascript executes a function with an ID, it stops in the first ID found. That 's why your function always works for the first row. It will not go for others.

If you want more elements of a page to be inlcuded in your code at the same time you should use a class eg $('.myClass'). For the same reason, form.find('#firstName') is redundant as $('#firstName') would also do the trick.

So by using class="deleteButton" instead of id and changing a bit the javascript code you are good to go.