How to remove select2 from dom

Question

Say we have a simple select2 list:

<select id="e1">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Initiated like:

$("#e1").select2();

How can I remove select2 and return it to a regular dropdown? I can't find any examples or entry in documentation.

Something like:

$("#e1").select2('remove');

would be nice.

Link to docs: https://select2.org/programmatic-control/methods#event-unbinding — mdlars, Feb 20 '19 at 14:30
Should be $('#elm').select2( 'destroy' ); [Reference](https://select2.org/programmatic-control/methods#destroying-the-select2-control) — Sushil Adhikari, May 28 '19 at 04:05
Selectize is better than select2 https://selectize.github.io/selectize.js/ i recommend it. — Elvis, Feb 06 '21 at 14:19

score 129 · Accepted Answer · answered Oct 11 '13 at 22:32

129

You need to use destroy method on select2. See the Documentation

i.e

 $("#e1").select2('destroy');

answered Oct 11 '13 at 22:32

PSL

123,204
21
253
243

8

Link has changed (they replaced it with docs for 4.0 which are currently woefully incomplete). Passing explanation can be found here: http://select2.github.io/select2/#lifecycle – Kat Jan 07 '15 at 02:31

score 15 · Answer 2 · answered Feb 13 '15 at 19:05

15

That work for me!

var $select = $('.select2').select2();
//console.log($select);
$select.each(function(i,item){
  //console.log(item);
  $(item).select2("destroy");
});

answered Feb 13 '15 at 19:05

jcmordan

1,038
13
20

Worked for me, to destroy every select2 instance – Muhammad Mehran Khan Attari Aug 18 '17 at 05:00
Important thing is that if you want to destroy select2 then make sure you have added it first, if your select input is not has select2 then destroy will not work. – always-a-learner Aug 05 '21 at 07:37
@always-a-learner There is a pretty nice tweak for this: https://stackoverflow.com/a/40746804/818628. Btw you dont need the each loop, works without it. – Erik Čerpnjak Jul 18 '23 at 13:36

score 5 · Answer 3 · edited Sep 02 '17 at 02:48

5

Version 4.0

$element.data('select2').destroy();

edited Sep 02 '17 at 02:48

Pang

9,564
146
81
122

answered Aug 25 '17 at 06:08

Nasri Zhang

63
1
4

score 1 · Answer 4 · edited Feb 06 '21 at 14:40

1

$(".select2").select2('destroy');
$(".select2").val('Your Value');
$('.select2').each(function () {
    $(this).select2({ dropdownParent: $(this).parent() });
});

edited Feb 06 '21 at 14:40

STA

30,729
8
45
59

answered Feb 06 '21 at 13:18

CTPL Developer 6

11
1

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn and eventually apply that knowledge to their own code. You are also likely to have positive-feedback/upvotes from users, when the code is explained. – Amit Verma Feb 06 '21 at 14:19

How to remove select2 from dom

4 Answers4