modificare lista elementi nascondendo l'elemento appena selezionato con jQuary

[AsevenX]

Salve, vorrei creare uno script per la selezione di alcuni elementi da parte dell'utente tramite una lista. Questo � lo script che ho realizzato fin ora: http://fcfriends.altervista.org/test/overlay.html

In poche parole lo script permette di visualizzare una finestra overlay contenente l'elenco degli elementi selezionabili (nell'esempio l'elenco dei colori). Cliccando su uno di questi elementi, il contenuto viene copiato tramite jQuary in un paragrafo con classe 'apri' inizialmente vuoto. Cliccando nuovamente sul bottone � possibile selezionare un nuovo colore, il quale si sostituir� a quello precedentemente scelto e cos� via. Fin qui tutto bene.. vorrei per� non rendere visibile (e quindi non disponibile alla selezione) l'elemento selezionato in precedenza. Ovvero, se si � scelto il colore rosso, questo non deve apparire nella lista, dando la possibilit� di scegliere obbligatoriamente un altro colore.


Non so se sono stato in grado di spiegarmi al meglio, per questo ho lasciato il link dell'esempio (anche per rendere visibile il codice a chiunque voglia aiutarmi).

Grazie a tutti per l'aiuto

[Floky]

Ciao, non sono un espertissimo ma in attesa di risposte di persone pi� esperte avanzo delle possibili soluzioni:

1) Una volta che hai recuperato il colore che ti serve potresti eliminarlo dalla lista iniziale. Per far ci� ti rimando alla guida dei metodi degli array https://www.w3schools.com/js/js_array_methods.asp. Ad un certo punto, eliminando ogni volta il colore scelto, ti ritroverai senza pi� item (i vari colori) nella tua lista quindi dovrai ripopolarla.

2) Potresti, invece di eliminarli nasconderli (con hide):

$('.elemento').click(function() {
        var elemento = $(this).text()
        var selezione = $('#colore_selezionato').html()
        
        
        //sostituisco con l'elemento selezionato
        $('#colore_selezionato').html(elemento)
        
        $(this).hide();


        //chiudo la finestra
        $('#overlay').fadeOut('fast');
        $('#box').hide();        
    });

3) Potresti renderlo non cliccabile ma visibile nella lista (magari dandogli del css per distinguerlo dagli altri). Potresti toglierli la classe elemento e dargliene un'altra (vedi addClass, removeClass) cosi non avendo pi� la classe specificata non esegue pi� il codice specificato.

Non li ho provati quindi ti consiglio di provarli tu stesso per vedere se fanno al caso tuo.

PS: tu metti l'oggetto in una variabile

var selezione = $('#colore_selezionato').html()

ma al momento di usarlo richiami di nuovo l'oggetto

 $('#colore_selezionato').html(elemento)

Dovresti invece

 $(selezione).html(elemento);

[AsevenX]

Grazie Floky per la risposta. Ho provato il tuo metodo ma alla fine ho optato per una più classica sequenza di selezione con if confrontando il valore selezionato con quello mostrato in lista (visualizzando solo quelli diversi).

PS: tu metti l'oggetto in una variabilecodice:
var selezione = $('#colore_selezionato').html()
ma al momento di usarlo richiami di nuovo l'oggettocodice:
$('#colore_selezionato').html(elemento)
Dovresti invececodice:

$(selezione).html(elemento);

grazie, mi sono confuso con i vari copia-incolla