javascript - 为什么在下一个列表条目时熔接项目会返回显示？

Question

我查看了之前的所有相关问题，但没有任何帮助，所以我来了。

用户可以一次向全局变量添加一个列表项，或者在每个列表项之间使用逗号进行复制/粘贴。
我认为很高兴继续那部分。无论如何它都有效。删除列表项也是如此。

问题是当删除一个项目后将下一个项目输入到列表中时，它也会将已删除的项目放回列表中。

这是我的代码片段和代码笔。请帮助我了解问题所在。

Code Pen

function deleteListItem(){
    var listToSearch = $('#displayArea').html().split(', ');
    var searchItem = prompt('item to delete').trim();
    var res = listToSearch.indexOf(searchItem);
    if(searchItem !== '' && res !== -1){
        listToSearch.splice(res, 1);
        $('#displayArea').html(listToSearch.join(', '));
    }else{
        alert('Please enter search name');
    }
}

Answer 1

发生这种情况是因为您使用来自 $('#displayArea') 的文本。但是您的代码中有 listInputArr 变量存储项目列表，但在您的函数中您不会更改它。因此，不要从字符串中获取项目，而是从 listInputArr 获取项目并删除其中的项目:

var searchItem = prompt('item to delete').trim();
var res = listInputArr.indexOf(searchItem);
if(searchItem !== '' && res !== -1){
  listInputArr.splice(res, 1);
  $('#displayArea').html(listInputArr.join(', '));
}else{
  alert('Please enter search name');
}