Question

I have two HTML select list and i want to remove all the elements in list 1 which are similar to elements in list 2.

<select id="availableLanguages" name="availableSoftwareLanguages" multiple="multiple" size="15">
    <option value="AL" label="All Languages">All Languages</option>
    <option value="AG" label="Argentina">Argentina</option>
    <option value="BU" label="Bulgarian">Bulgarian</option>
    <option value="CF" label="Canadian French">CanadianFrench</option>
    <option value="C1" label="Cantonese">Cantonese</option>
</select>

<input id="addLanguages" type="button" value=" >> ">
<input id="removeLanguages" type="button" value=" << ">

<select id="selectedLanguages" name="selectedLanguages " multiple="multiple" size="15">
    <option value="AL" label="All Languages">All Languages</option>
    <option value="AG" label="Argentina">Argentina</option>
    <option value="BU" label="Bulgarian">Bulgarian</option>
</select>

So here i want to remove options from list availableLanguages which are similar to options in list selectedLanguages.

Answer 1

I’m assuming you’re matching by option value? If so, try:

$("#selectedLanguages option").each(function () {
    $("#availableLanguages option[value='" + $(this).val() + "']").remove();
});