javascript - Unselect an option using jQuery on a Bootstrap selectpicker -

i using bootstrap ui elements: selectpicker allows user select multiple options , have rendered screen in paragraph tags. should able remove selected option.

this code render selected options onto screen, each option appears 'x' next it, when it's clicked selected item removed screen:

//render selected item screen  $('#datacombo').change(function(){ $('#dataoutput').html(''); var values = $('#datacombo').val(); for(var = 0; < values.length; += 1) { $('#dataoutput').append("<p class='removeable'>" + values[i] + " x </p>") }});  //when 'x' clicked, remove item  $("#dataoutput").on('click','.removeable',function(){ $(this).remove(); //this removes item screen //next need unselect datacombo selectpicker var foo = $(this); $('#datacombo').find('[value=foo]').remove(); console.log(foo); $('datacombo').selectpicker('refresh'); });    

so problem second half of 'remove' code, while item removed output display, still selected in select picker, when item selected - 'removed' item re-rendered. ideas how can this?

the html pretty simple:

<h6>combobox</h6> <select id="datacombo"  class="selectpicker" multiple> </select> 

here working exemple using deselectall() method.

bootply : http://www.bootply.com/124259

js :

//render selected item screen  $('#datacombo').change(function(){ $('#dataoutput').html(''); var values = $('#datacombo').val(); for(var = 0; < values.length; += 1) { $('#dataoutput').append("<p class='removeable'><span class='reel'>" + values[i] + "</span> x </p>") }});  //when 'x' clicked, remove item  $("#dataoutput").on('click','.removeable',function(){ $(this).remove(); //this removes item screen //next need unselect datacombo selectpicker var foo = $(this); $('#datacombo').find('[value='+foo.find('.reel').html()+']').remove();  //  $('#datacombo').val(  ); $values = $('#datacombo').val(); $('#datacombo').selectpicker('deselectall'); $('#datacombo').selectpicker('val', $values ); $('#datacombo').selectpicker('refresh'); });    $("#datacombo").selectpicker({     multiple:true   }); 

update :

change

$('#datacombo').find('[value='+foo.find('.reel').html()+']').remove(); 

by

$('#datacombo').find('[value='+foo.find('.reel').html()+']').prop('selected', false);