Как в html datalist убрать не нужные поля?

Question

Обновляю datalist через ajax, но сохраняются другие значения, на картинке это 4,1,2. Как удалять их?

удаляю все option предыдущие так document.getElementById('one_form-device').innerHTML = '';

html

<input id="ajax_input_one_form-device" list="one_form-device" name="one_form-device" value="" required="" placeholder="Loading options...">
<datalist id="one_form-device">
<option value="3">Casio</option>
<option value="5">Casio Edifice</option>
<option value="6">Casio G-Shock</option>
</datalist>

Answer 1

У всех наследников HTMLElement есть метод remove (доставшийся от ChildNode, но это уже не суть важно).
Следовательно, для удаления ненужных option'ов - остается лишь немножко задействовать мозг, для формализации критерия ненужности в ветвлении алгоритма.

Например, если представить что ненужными являются только те элементы option, у которых ровно один символ в их текстовом содержимом:

const datalist = document.querySelector('#one_form-device');
for (const option of [...datalist.options]) {
  if (option.textContent.length === 1)
    option.remove();
}

<input id="ajax_input_one_form-device" list="one_form-device" name="one_form-device" value="" required="" placeholder="Loading options...">
<datalist id="one_form-device">
  <option value="3">Casio</option>
  <option value="4">4</option>
  <option value="5">Casio Edifice</option>
  <option value="6">Casio G-Shock</option>
  <option value="7">7</option>
  <option value="8">8</option>
</datalist>

БЛОГ НА HUSL

Как в html datalist убрать не нужные поля?

Ответы (1 шт):