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

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

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

在html中显示添加的用户列表，以便在需要时删除每个行项目

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

逗号分隔的userlist+html列表将用户添加到每个新创建的行项目中

从HTML列表中删除一行项目无法按预期工作

预期结果：

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

html值：

亚当（删除）

伯莎（删除）

凯撒（删除）

请看一下我的，并告诉我如何在html+输入字段中正确显示用户列表，好吗

var用户=[]；
$（“#adddis”）。单击（函数（）{
var值=$（'input[type=text]'）。映射（函数（）{
返回$（this.val（）；
}).get（）.join（）；
$（'#adddisnames'）.val（“”）；
addUser（值）；
});
函数buildUserlist（）{
var html=“
”；
对于（var i=0；i'；
};
$（'#userdiv'）.html（html）；
}
函数addUser（值）{
用户。推送（值）；
buildUserlist（）；
$（'storadddis'）.val（用户）；
}
函数removeUser（索引）{
用户.拼接（索引，1）；
buildUserlist（）；
$（'storadddis'）.val（用户）；
}

名称
=>

而不告诉您更新所有内容以使其更干净。我认为您的简单解决方案是更新这一行：

var values = $('input[type=text]').map(function() {

到

---

您以前使用的方法是查找两个输入字段，然后复制结果

首先：将此代码更改为此

 $("#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("");

}  

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

 $("#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("");

}  

---

您应该使用

users

数组作为数据的主控。添加名称时，不要将该

输入值

与最右边的

输入值

一起使用。将最右边控件中的文本视为输出，而不是输入。

当您使用jQuery时，我也会完全使用jQuery来填充

div

元素。通过这种方式，您还可以确保用户名中可能被误解为HTML的任何字符都被正确转义

对于单击处理程序：最好使用事件委派，并且只在

div

元素上定义一次单击处理程序。您可以知道使用

.index（）

jQuery方法单击了哪个链接

var用户=[]；
$（“#adddis”）。单击（函数（）{
addUser（$（'#adddisnames'）.val（）.split（“，”）；//将数组作为参数传递
$（'#adddisnames'）.val（“”）；
});
$（'#userdiv'）。在（“单击”，“a”，函数（）{//event delegation
removeUser（$（this.parent（）.index（））；
});
函数buildUserlist（）{
//使用jQuery函数构建DOM列表：
$（'#userdiv'）.empty（）.append(
users.map（函数（用户）{
返回$（“”）text（用户）。追加（$（“”）attr（“href”，“#”）text（“”）✘"));
})
);
$（'#storadddis'）.val（用户）；//在这里执行此操作，因为它是输出的一部分
}
函数addUser（values）{//此处需要一个数组作为参数
values=values.map（value=>value.trim（））//修剪值
.filter（布尔）；/…并排除空条目
users=users.concat（values）；//连接两个数组
users=Array.from（新集合（用户））；//使列表唯一
buildUserlist（）；
}
函数removeUser（索引）{
用户.拼接（索引，1）；
buildUserlist（）；
}

a[href]{
颜色：红色；
左侧填充：5px；
}

名称
=>

var values=$（'input[type=text]'）.map（function（）{return$（this.val（）））.get（）.join（）；

为什么？您正在从页面上的所有输入字段（包括storadis）获取用户。只需拥有

$（“#adddis”）。单击（function（）{var value=$（'.#adddisnames'）.val（）；if（value）addUser（value）；）

请随意删除问题您知道如何检查用户是否已存储在数组中并防止保存冗余用户吗？

函数addUser（values）{if（users.indexOf（values）！=-1）return；users.push（values）；buildUserlist（）；$（'#storadddis'）.val（users）；}

这比我尝试编写此函数要好得多。非常感谢您对代码的详细评论。我从您那里学到了很多东西。我对这些函数很满意。我唯一需要解决的是防止向数组中添加重复用户。您可以使用

Set

创建唯一列表。我为此添加了一行代码。好的，很酷。但是当提交一个空值时，它会创建一个“x”符号。当单击add时，必须检查值是否为空，然后它就像一个符咒一样工作。

$“#adddis”）。单击（function（）{var value=$（'#adddisnames'）.val（）；if（value）{addUser（value.split（“，”）//将数组作为参数传递$（'#adddisnames'）.val（“）}}）；

我添加了两行代码来修剪名称周围的空格，并丢弃空条目（比如相邻两个逗号）。是的，这导致了问题。修复了它，它起了作用。TKS不确定在修复问题时为什么会被否决