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

Question

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

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

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

不幸的是，我的代码中存在以下问题:

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

2. 从 HTML 列表中删除一个订单项无法按预期进行。

预期结果:

输入值: Adam、Bertha、Caesar

html 值:

亚当(删除)

伯莎(删除)

凯撒(删除)

你能看一下我的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>

Answer 1

首先:将此代码更改为此

 $("#adddis").click(function() {
     if ($('#adddisnames').val().length !== 0) {
       addItem($('#adddisnames').val());
     } else {
        alert ('Please add User!')
     }
});

下一步:将此代码也更改为此

function addItem(values) {
  users.push(values);
  buildUserlist();
  $('#storadddis').val(users.toString());
  $('#adddisnames').val("");

}