Question

输入包含一个列表项，比方说一个名称。

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

然后，如果有一个匹配的名称，我们可以从列表中删除该名称。

问题是在删除列表项之后出现的。输入下一项时，也会显示删除的名称。我对密码笔有很好的评价，在尝试将其移至更永久的位置之前，我试图在其中敲定所有这些细节。先感谢您。

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(','));


}

Answer 1

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

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

Answer 2

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

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

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

为什么列表项被拼接后仍然保留？

2 个答案: