Jquery - Remove Options from Bootstrap-Select when Proceeding Select Changes

I have tried multiple combinations and just can't clear this control.
I am using jquery 3.2.1, the control is Bootstrap-select v1.13.1 here is the link
https://developer.snapappointments.com/bootstrap-select/.

I want to clear the teamPositionFilter options which is multi-select whenever the
groupFilter before it changes. Right now it is appending values after each change. I can step through the javascript code but it does not change the list.

@Html.DropDownList("groupFilter", (SelectList)(@ViewBag.GroupList), new { @class = "singleselectpicker col-md-3", title = "Group:", data_header = "Select Group:" })
@Html.DropDownList("teamPositionFilter", (MultiSelectList)(@ViewBag.TeamPositionList), new { @class = "multiselectpicker col-md-3", multiple = "multiple", title = "Team Position:", data_header = "Select one or more Team Positions:" })
$(function() {
$('#groupFilter').change(function () {
    var #teamPositionFilter = $('#teamPositionFilter');
    #teamPositionFilter.find('option').remove();
    #teamPositionFilter.selectpicker('refresh');
});
$('.singleselectpicker').selectpicker({
    showTick: true,
    tickIcon: 'glyphicon-pushpin',
    liveSearch: true,
    liveSearchStyle: 'contains',
    selectOnTab: true,
    showContent: true,
    size: 10,
    width: 'false'
});
$('.multiselectpicker').selectpicker({
        actionsBox: true,
        selectAllText: 'Select All',
        deselectAllText: 'Deselect All',
        selectedTextFormat: 'count',
        showTick: true,
        tickIcon: 'glyphicon-pushpin',
        liveSearch: true,
        liveSearchStyle: 'contains',
        selectOnTab: true,
        showContent: true,
        size: 10,
        width: 'false',
        multipleSeparator: ', '
});

});