使用jQuery从数组列表中添加和删除数组项

Question

我想建立一个可以添加和删除用户的功能

1. 以逗号分隔的字符串存储在输入字段和

2. 显示html中已添加用户的列表，以根据需要删除每个订单项。

很遗憾，我的代码中存在以下问题：

1. 用逗号分隔的用户列表+ html列表将用户添加到每个新创建的订单项中

2. 从HTML列表中删除一个订单项无法正常工作。

预期结果：

输入值：亚当，伯莎，凯撒

html值：] >>

亚当（删除）

Bertha（删除）

凯撒（删除）

您能否看一下我的js fiddle，并提示我如何在html +输入字段中正确显示用户列表？

var users = [];

$("#adddis").click(function() {
  var values = $('input[type=text]').map(function() {
    return $(this).val();
  }).get().join();
  $('#adddisnames').val("");
  addUser(values);
});

function buildUserlist() {

  var html = "<hr>";
  for (var i = 0; i < users.length; i++) {
    html += users[i] + ' <a href="#" onclick="removeUser(' + i + '); return false;">X</a><br>';
  };
  $('#userdiv').html(html);
}

function addUser(values) {
  users.push(values);
  buildUserlist();
  $('#storadddis').val(users);
}

function removeUser(index) {
  users.splice(index, 1);
  buildUserlist();
  $('#storadddis').val(users);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Name</label>
<input type="text" id="adddisnames" value="">
<input type="button" name="get_value" id="adddis" value="add"> =>
<input type="text" id="storadddis" size="35">
<div id="userdiv"></div>

我想建立一个函数，您可以在其中添加和删除用户以逗号分隔的字符串，该字符串存储在输入字段中，并以html显示添加的用户列表以删除每个订单项...

Answer 1

没有告诉您更新所有内容以使其更干净。我认为您的简单解决方法是更新此行：