Удалить элемент из datalist

Question

У меня есть рабочий вызов Ajax и функция, которая заполняет каталоги данных. Datalist используется для выбора из конечного списка дополнения к элементу UL на странице. Как только я добавлю один из datalist в фактический список, я хочу удалить эту опцию из datalist. Метод грубой силы, который я использую, - это очистить datalist и повторно заселить его.

function populate_datalist_from_array(list_id, list_str) 
{ 
    clearChildren(list_id); 
    var arr = eval (list_str); 
    for (var i = 0; i < arr.length; i++) { 
     var opt = document.createElement('option'); 
     opt.innerHTML = arr[i]; 
     opt.value = arr[i]; 
     document.getElementById(list_id).appendChild(opt); 
    } 
} 

function clearChildren(parent_id) { 
    var childArray = document.getElementById(parent_id).children; 
    if (childArray.length > 0) { 
     document.getElementById(parent_id).removeChild(childArray[ 0 ]); 
     clearChildren(parent_id); 
    } 
} 

Я проверил, что list_str объект является правильным. то есть он содержит только параметры, которые еще не находятся в текущем списке. Но после вызова populate_datalist_from_array с этим новым списком, datalist в выпадающем меню не изменится. Это потому, что браузер по существу скомпилировал все значения, которые были там (например, это была обычная автозаполнение на основе браузера) и не «забыл» значения, которые я хочу удалить?

Answer 1

Если list_str действительно в порядке, ваш код работает. Вы можете проверить его в действии на jsFiddle.

Наиболее общая причина описанного поведения заключается в том, что ваш код обновляет страницу. Если вы удалите type="button" из кнопки «Изменить параметры» в связанной скрипте, вы получите сообщение об ошибке (из-за самой скрипки). На вашей странице, вероятно, есть что-то подобное, вызывающее populate_datalist_from_array(). Обратите внимание, что также нажмите Введите на активном вводе текста, чтобы отправить/обновить.

Answer 2

JsFiddle Teemu отлично работает. Однако обычно лучше избегать рекурсии и нескольких запросов DOM, когда это не требуется.

Это изменение, которое требует только одного запроса DOM и является итеративным. (Примечание декремент перед индексом, потому что это с нуля список)

clearChildren = function (parent_id) { 
     var parent = document.getElementById(parent_id); 
     var childArray = parent.children; 
     var cL = childArray.length; 
     while(cL > 0) { 
      cL--; 
      parent.removeChild(childArray[cL]); 
     } 
    }; 

(В JSFiddle на MacBookPro я спас 10 мс - с 15 мс Всего - в списке 500 элементов, но может быть более драматичным с большим DOM-х на мобильном телефоне).