Question

What I want to do is that which ever options are display in the “#studentadd” select box, I want to be able to remove ALL matching options from the #studentselect select box as well as empty the #studentadd select box. But at the moment it is not doing this.

What am I doing wrong?

Below is html of both select boxes:

Below is the select box #studentadd:

<select multiple="multiple" name="addtextarea" id="studentadd" size="10">
    <option value='1'>u08743 - Joe Cann</option>
    <option value='4'>u03043 - Jill Sanderson</option>
    <option value='7'>u08343 - Craig Moon</option>
</select>

Below is the select box the students should be appended into:

    <select id="studentselect" name="studenttextarea">
        <option value='1'>u08743 - Joe Cann</option>
        <option value='4'>u03043 - Jill Sanderson</option>
        <option value='7'>u08343 - Craig Moon</option>
</select>

Below is jquery:

$('#studentadd option').attr('selected', 'selected');

var selectedOption = $('select#studentadd');
$('select#studentselect').remove(selectedOption.html());

Answer 1

Try

var selectedOption = $('#studentadd').find(':selected');
var studentSelect = $('#studentselect');
selectedOption.each(function(){
    studentSelect.find('[value="'+this.value+'"]').remove();
});

DEMO