Destroying Selectize.js instances

Question

I am loading an ajax form with inputs that I apply .selectize() to. I run into issues when I close and reopen the form because there are instances of the Selectize constructor function that are still around.

Is there a way to remove these instances when I close the form? I can see these objects build up as I open and close the form by looking through firebug in the DOM under Selectize.count. How do I access these instances and destroy them?

I have tried this:

instance1[0].selectize.destroy();
instance2[0].selectize.destroy();

Assigned the variables like this:

instance1 = $('#preferences_sport').selectize({
  //custom code
});

instance2 = $('#preferences_sport').selectize({
  //custom code
});

The Selectize.count continues to build up and I am not sure where to go from here.

Here is a JSFiddle where I show the objects building up

Answer 1

So I see what you are saying now that the fiddle was added. I began by searching the documentation for that count property. I couldn't find it. So next I searched the source code since it seems this is some undocumented thing. The only count I could find in source code was this line:

eventNS          : '.selectize' + (++Selectize.count),

So basically this explains it. That count while it does increase for every element this is called on is not a current count of running widgets. Its an internal property the guy who wrote this uses as a GUID for event namespaces. So for instance when you call destroy he can only remove the events specific to that instance of the widget.

I would not use this property to tell you anything. I think its safe to assume that your destroy is working fine. If you are unfamiliar with event namespacing you can read more about it here:

https://api.jquery.com/event.namespace/

You can see he uses that eventNS throughout the code to attach events if you search for it. jQuery does this in their code too for lots of stuff like in their event and data code. They have a GUID variable they use so anyone who loads more than one instance of jQuery on a page, the instances won't step on each others toes.

So I guess the only thing I would now ask you is where did you learn about this count property? If you just found it and assumed that it meant this was a count of running instances try to remember to always check with the documentation. If you found it in the docs then please point me towards now so I can take a look and see if it verifies what I found or requires more looking into.

---

Also as a bonus heads up, I saw this in your fiddle, input is a self closing tag or also known as void elements.

<input type="text" value="Calgary, Edmonton" class="selectize_this"></input>

Should just be:

<input type="text" value="Calgary, Edmonton" class="selectize_this" />

From the spec:

Void elements can't have any contents (since there's no end tag, no content can be put between the start tag and the end tag).

Void elements: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Answer 2

The Selectize API does expose the following method:

destroy()

Destroys the control and unbinds event listeners so that it can be garbage collected.