Rimuovi un elemento dal datalist

Ho una chiamata Ajax funzionante e una funzione che popola un datalist. Il datalist viene utilizzato per selezionare da un elenco finito un’aggiunta a un elemento UL nella pagina. Una volta che ne aggiungo uno dal datalist alla lista attuale, voglio rimuovere quell’opzione dal datalist. Il metodo di forza bruta che sto usando è quello di cancellare il datalist e ripopolarlo.

function populate_datalist_from_array(list_id, list_str) { clearChildren( list_id ); var arr = eval ( list_str ); for (var i = 0; i  0 ) { document.getElementById( parent_id ).removeChild( childArray[ 0 ] ); clearChildren( parent_id ); } } 

Ho verificato che l’object list_str è corretto. cioè, contiene solo le opzioni non già nella lista corrente. Ma dopo aver chiamato populate_datalist_from_array con quella nuova lista, il datalist nel menu a tendina non cambia. Questo perché il browser ha essenzialmente compilato tutti i valori presenti (come se fosse un normale completamento automatico basato su browser) e non “dimentica” i valori che desidero rimuovere?

Se list_str è davvero OK, il tuo codice funziona. Puoi controllarlo in azione su jsFiddle .

Il motivo più generale per un comportamento che hai descritto è che il tuo codice aggiorna la pagina. Se rimuovi type="button" dal type="button" Cambia opzioni” nel fiddle collegato, riceverai un errore (dovuto al violino stesso). Nella tua pagina probabilmente hai qualcosa di simile invocando populate_datalist_from_array() . Si noti che anche premendo Invio su un input di testo attivo verrà inviato / aggiornato.

Il JsFiddle di Teemu funziona perfettamente. Tuttavia, è normalmente meglio evitare la ricorsione e più query DOM quando non richieste.

Ecco una modifica che richiede solo una singola query DOM ed è iterativa. (Il decremento delle note prima dell’indice perché questo è un elenco basato su zero)

  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]); } }; 

(In JSFiddle su MacBookPro ho salvato 10 ms – da 15 ms totali – su un elenco di 500 elementi, ma potrebbe essere più drammatico con i DOM più grandi sui dispositivi mobili).