How to remove an item from Selectize?

Question

Is there any way I can remove an item from Selectize?

Here is my a sample list:

1. AMNT
2. QTY
3. NA

When I pass NA it should remove particular item:

   $.fn.removeSelectorValue = function (value) {
      var selectize = this[0].selectize;
      selectize.removeItem(value);

      return this;
   };

This is not working. Can anyone help me with this?

Answer 1

removeItem removes selected item identified by given value. To remove option from the list you should use removeOption

Example - open http://brianreavis.github.io/selectize.js/, open console and enter:

$('#select-beast')[0].selectize.removeOption(1)

to remove Chuck Tesla from available options

Answer 2

I'm late to the party but the other methods didn't work for me, I don't know if its because I was pulling in a list from a remote source?

In short there are 2 steps:

1. Get the value of the selected item
2. Remove that item

You can obviously make this code smaller but i've left it verbose for readability

var $select = $('#users').selectize(); 
var selectSizeControl = $select[0].selectize; 
// 1. Get the value
var selectedValue = selectSizeControl.getValue()
// 2. Remove the option 
selectSizeControl.removeOption( selectedValue )

Answer 3

$(document).on('click', 'div.selectize-input div.item', function(e) {
    var select = $('#services').selectize();
    var selectSizeControl = select[0].selectize;
    // 1. Get the value
    var selectedValue = $(this).attr("data-value");
    // 2. Remove the option 
    select[0].selectize.removeItem(selectedValue);

    select[0].selectize.refreshItems();
    select[0].selectize.refreshOptions();

});

This code do not remove the item from the select, just remove it from the selected options.

Answer 4

Was recently implementing this, and if you remove the last item, the input looks buggy (as mentioned above). A workaround (kind of hackish) is in the onItemRemove function, find the length of saved items, and if length == 0, use jQuery to fix the input - $('.selectize-input').css({'height':'35px'});