为什么列表项拼接出来后仍然存在？答案

【问题标题】：Why does the list item remain after it has been spliced out?为什么列表项拼接出来后仍然存在？
【发布时间】：2019-02-13 06:32:20
【问题描述】：

输入需要一个列表项，比如说一个名称。

输入名称后，它会被添加到数组中，并以 html 的形式显示在 div 中。

然后我们有一个区域可以从列表中删除匹配的名称。

问题出现在删除列表项之后。输入下一项时，也会显示已删除的名称。我对代码笔有很好的评论，我试图在将其移至更永久的地方之前敲定所有细节。先感谢您。

code pen

var userInputArr = [];
function inputNames(){
  var userInput = $('#userInput').val();
  userInputArr.push(userInput);
  if(userInput !== ' '){
    $("#listDisplayDiv").html(userInputArr.join(','));
  $('#userInput').val(' ');
    $('#userInput').html(' ');
  }else{
    alert('add name');
  }

}


//clear item from list

function clearItem(){
  var listValue = $('#listDisplayDiv').html();
  var listValArr = listValue.split(',');
  var itemToClear = $('#clearItemInput').val();
  var indexOfSearch = listValArr.indexOf(itemToClear);
  listValArr.splice(indexOfSearch, 1);
  $('#listDisplayDiv').html(listValArr.join(','));


}

【问题讨论】：

在此处发布您的代码，而不仅仅是在远程站点。您可以使用Stack Snippets 使其可执行。
inputNames() 函数将名称添加到userInputArr。 clearItem() 不会从中删除它。

标签： javascript arrays list splice

【解决方案1】：

当您输入一个新名称时，它会将名称添加到userInputArr 全局变量中，并使用它来生成#listDisplayDiv 的内容。

当您清除名称时，会将其从 #listDisplayDiv 中删除，但不要将其从 userInputArr 中删除。因此，下次添加名称时，您会从包含所有旧名称的数组中重新生成 DIV 内容。

你需要保持一致。要么这两个函数都应该拆分 HTML，更新该数组，然后加入它以生成 DIV 内容，要么都应该使用 userInputArr 变量。

【讨论】：

【解决方案2】：

您不会将其从 userInputArr 中删除，因此请在您的 clearItem() 函数中添加类似的内容。

userInputArr.splice(userInputArr.indexOf(itemToClear), 1)

【讨论】：