Bootstrap select destroy removes the original select from DOM

Question

I am currently using the Bootstrap select plugin in one of my projects. I have a dynamically generated table that has select elements which I then convert to bootstrap select using the command:

_tr.find('select.selectpicker').selectpicker({ size: 10 });

Where _tr is the row where I added the select elements. This is working fine, the bootstrap select is shown and in firebug I still see the original select element.

Now every row has a button where it removes ( destroy ) the bootstrap select. But it removes also the original select, and thats the poblem because I still need the original select to do something else.

I use the following command to destroy:

 $('select#begin' + _week + _day).selectpicker("destroy");
 $('select#end' + _week + _day).selectpicker("destroy");
 $('select#pause' + _week + _day).selectpicker("destroy");

In other plugins if you use destroy, it shows the original element again. Is this an issue in the boostrap select plugin or is there another way to remove the bootstrap select and reshow the original select.

Answer 1

Found the solution, I edit the plugin function destroy where instead of removing the original element, I show it back:

remove: function () {
  this.$newElement.remove();
  this.$element.show(); // First it was this.$element.remove();
}

Answer 2

I am really appreciate your method because it helps me a lot. But I found a way to improve your method without changing the original code. Here is what I did:

jQuery.fn.selectpicker.Constructor.prototype.removeDiv = function () {
    this.$newElement.remove();
    this.$element.show();
};

After that, we can use:

jQuery("#some_id").selectpicker("removeDiv");