How to remove an item from Selectize?

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


$(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.


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 )