Reputation: 372
I have hit a bit of a design flaw with a project. In this project I initialized some variables as jquery objects.
var $overlay = $('<div id = "overlay"/>');
The intention is that there is only one overlay so I thought it would be easier to keep it assigned to a variable. I have functions that add classes to it, html to it, etc. There is also the ability to remove it via jquery like
$overlay.remove();
What I never took in to account is that any class or html applied to this div is still going to be present if I ever want to show the overlay again with new information or attributes. How can I "reset" this variable?
I made this jsfiddle to demonstrate the two methods I could have used.
$box is akin to my $overlay issue where if you change its colour, destroy it, and then remake it, it will have this new colour still. I know this is mostly a design flaw but if there is no way around it I will re-design..
http://jsfiddle.net/mLnmbkhj/10/
Upvotes: 0
Views: 115
Reputation: 43
If I'm understanding your problem, could you add an on click event for leaving the overlay? In the event, .detatch() the element you want off.
Upvotes: 0
Reputation: 5168
How about just re-initializing?
$('#destroyBox').on('click', function () {
$box.remove();
$box = $('<div id="box"/>');
// Would like to somehow reset the box object
});
Upvotes: 2