我正在将 Bootstrap 用于一些 UI 元素：SelectPicker，它允许用户选择多个选项并在段落标签中将其呈现到屏幕上。他们还应该能够删除选定的选项。
这是我将所选选项呈现到屏幕上的代码，因此每个选项旁边都会显示一个“X”，当单击它时，所选项目将从屏幕中删除：
//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');
});
所以问题是“删除”代码的后半部分，虽然该项目确实从输出显示中删除了，但它仍然在选择选择器中被选中，所以当另一个项目被选中时——“删除”项目被重新渲染. 任何想法我怎么能做到这一点？
HTML非常简单：
<h6>ComboBox</h6>
<select id="dataCombo" class="selectpicker" multiple> …