Reimpostazione di un oggetto jquery: javascript, jquery, html, css

Ho riscontrato un difetto di progettazione con un progetto. In questo progetto ho inizializzato alcune variabili come oggetti jquery.

var $overlay = $("<div id = "overlay"/>");

L'intenzione è che esiste un solo overlayquindi ho pensato che sarebbe stato più facile tenerlo assegnato a una variabile. Ho funzioni che aggiungono classi ad esso, html ad esso, ecc. C'è anche la possibilità di rimuoverlo tramite jquery come

$overlay.remove();

Quello che non ho mai preso in considerazione è che qualsiasi classeo l'html applicato a questo div sarà ancora presente se voglio mostrare nuovamente l'overlay con nuove informazioni o attributi. Come posso "resettare" questa variabile?

Ho creato questo jsfiddle per dimostrare i due metodi che avrei potuto usare.

$ box è simile al mio problema $ overlay dove se tucambia il suo colore, distruggilo e poi rifacilo, avrà ancora questo nuovo colore. So che questo è principalmente un difetto di progettazione, ma se non c'è modo di evitarlo riprogetterò ..

http://jsfiddle.net/mLnmbkhj/10/

risposte:

Che ne dici di reinizializzare?

$("#destroyBox").on("click", function () {
$box.remove();
$box = $("<div id="box"/>");
// Would like to somehow reset the box object
});

Se capisco il tuo problema, potresti aggiungere un evento al clic per lasciare l'overlay? Nel caso, .detatch () l'elemento che desideri.