Почему элемент списка остается после его склеивания? - PullRequest
Новая
       29

Почему элемент списка остается после его склеивания?

0 голосов
/ 08 сентября 2018

На вход берется элемент списка, скажем, имя.

При вводе имени оно добавляется в массив и отображается в формате html в div.

Тогда у нас есть область для удаления имени из списка, если оно совпадает.

Проблема возникает после удаления элемента списка. Когда вводится следующий элемент, также отображается удаленное имя. У меня есть хорошие замечания относительно кодового пера, где я пытаюсь проработать все детали этого, прежде чем переместить его в более постоянное место. Заранее спасибо.

код ручки 

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


}

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

Когда вы вводите новое имя, оно добавляет имя в глобальную переменную userInputArr и использует его для создания содержимого #listDisplayDiv.

Когда вы очищаете имя, вы удаляете его из #listDisplayDiv, но не удаляете его из userInputArr. Поэтому в следующий раз, когда вы добавите имя, вы регенерируете содержимое DIV из этого массива, который имеет все старые имена.

Вы должны быть последовательными. Либо обе функции должны разбивать HTML-код, обновлять этот массив и затем присоединять его для создания содержимого DIV, либо обе должны использовать переменную userInputArr.

0 голосов
/ 08 сентября 2018

Вы не удаляете его из userInputArr, поэтому добавьте что-то подобное в вашу функцию clearItem(). 

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