Question

我有这个地址簿，可以为我提供新的联系方式。我的添加按钮工作正常。当我尝试拥有2个或更多联系人时，似乎我的DELETE按钮仅适用于第一行上的任何内容。但我实际上希望它删除此按钮所在的当前行。通过删除一行，我也希望我的“联系人”数组更新，此联系人不再存在。有人可以帮我纠正这个吗？

    var addressBook = (function() {

var contact = [{
    firstName: 'myName',
    lastName: 'myLastName',
    number: '123456789',
    email: 'myEmail@gmail.com'
}];

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

这是怎么回事？看起来在你的删除方法中，你的目标是td而不是tr，然后调用用于构建行的函数freom添加了联系人数据？

var addressBook = (function() {

  var contact = [{
    firstName: 'myName',
    lastName: 'myLastName',
    number: '123456789',
    email: 'myEmail@gmail.com'
  }];

  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

您在每一行中添加 #deleteButton 。由于ID在页面中必须是唯一的，因此当javascript执行带ID的函数时，它会在找到的第一个ID 中停止。这就是为什么你的功能总是适用于第一行的原因。它不适合其他人。

如果您希望在代码中同时包含更多页面元素，则应使用类，例如$（'。myClass'）。出于同样的原因， form.find（'＃firstName'）是多余的，因为$（'＃firstName'）也可以做到这一点。

因此，使用 class =“deleteButton”代替id并更改javascript代码，您就可以了。

javascript函数只删除第一个html行

2 个答案: