Clear Button

new TomSelect('#ex-clear-button',{
plugins: {
'clear_button':{
'title':'Remove all selected options',
}
},
persist: false,
create: true,
});
<input type="text" id="ex-clear-button" value="awesome,neat" autocomplete="off" placeholder="How cool is this?" />
new TomSelect('#clear-button-single',{
maxItems:1,
plugins: ['clear_button'],
persist: false,
create: true,
});
<select type="text" id="clear-button-single" autocomplete="off">
<option value="">How cool is this?</option>
<option selected>awesome</option>
<option>neat</option>
</select>
new TomSelect('#clear-button-empty',{
allowEmptyOption: true,
maxItems:1,
plugins: ['clear_button'],
persist: false,
create: true,
});
<select type="text" id="clear-button-empty" autocomplete="off">
<option value="">How cool is this?</option>
<option>awesome</option>
<option>neat</option>
</select>

Plugin Configuration

Setting Description
html

A callback that returns an html string used to create the button

Type: callback Default:
function(data){
return `<div class="${data.className}" title="${data.title}">&times;</div>`;
}
title

The value of the title attribute on the close button

Type: string Default: Clear All
className

The CSS class name of the close button

Type: string Default: clear-button

Available Plugins