Unselect an option using jQuery on a Bootstrap selectpicker

Question

I am using Bootstrap for some UI elements: SelectPicker which allows a user to select multiple options and have it rendered to the screen in paragraph tags. They should also be able to remove a selected option.

This is my code to render the selected options onto the screen, so that each option appears with an 'X' next to it, when it's clicked the selected item is removed from the screen:

//Render selected item to the screen

$('#dataCombo').change(function(){
$('#dataOutput').html('');
var values = $('#dataCombo').val();
for(var i = 0; i < values.length; i += 1) {
$('#dataOutput').append("<p class='removeable'>" + values[i] + " x </p>")
}});

//When the 'X' is clicked, remove that item

$("#dataOutput").on('click','.removeable',function(){
$(this).remove(); //this removes the item from the screen
//Next i need to unselect it from dataCombo selectpicker
var foo = $(this);
$('#dataCombo').find('[value=foo]').remove();
console.log(foo);
$('dataCombo').selectpicker('refresh');
});   

So the problem is the second half of the 'remove' code, while the item does get removed from the output display, it is still selected in the select picker, so when another item is selected - the 'removed' item is re-rendered. Any ideas how i can do this?

The HTML is pretty simple:

<h6>ComboBox</h6>
<select id="dataCombo"  class="selectpicker" multiple>
</select>

Answer 1

Here is a working exemple using deselectAll() method.

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

JS :

//Render selected item to the screen

$('#dataCombo').change(function(){
$('#dataOutput').html('');
var values = $('#dataCombo').val();
for(var i = 0; i < values.length; i += 1) {
$('#dataOutput').append("<p class='removeable'><span class='reel'>" + values[i] + "</span> x </p>")
}});

//When the 'X' is clicked, remove that item

$("#dataOutput").on('click','.removeable',function(){
$(this).remove(); //this removes the item from the screen
//Next i need to unselect it from 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);