Удаление опции из компонента select с использованием jQuery не работает

Question

У меня есть форма, в которой пользователь может вводить несколько экземпляров данных в экспериментах. Каждый раз, когда пользователь вводит экземпляр, строка создается в динамической таблице.

Он также добавляет возможность выбора двух компонентов, которые пользователь должен использовать, чтобы заполнить больше данных из формы. Так, например, пользователь заполняет информацию из эксперимента 1 и эксперимента 2, поэтому таблица будет создана с двумя рядами одна для эксперимента 1 и одна для эксперимента 2, а компоненты выбора будут иметь два варианта. Эксперимент 1 и эксперимент 2.

Каждая строка этой таблицы имеет ячейку строки удаления, которую пользователь может щелкнуть, чтобы удалить эту строку. Удаление строки работает нормально, но у меня возникли проблемы с удалением опции из выбранного компонента. Для этого я делаю это в JQuery

if($(obj).closest('table').attr('id')=='experiment-table'){ 
    var exp = tr.find('td:first').text(); 

    var txt = 'Experiment ' + exp; 

    $('#exp-select option[value="'+exp+'"]').remove(); 
    $('#expind-select optgroup[text="'+txt+'"]').remove(); 
} 

Так что делает этот код, предположительно, будет искать идентификатор ближайшего табличного тега OBJ, OBJ в данном случае является строка таблицы (т), где пользователь нажал кнопку удаления.
Затем он находит первую ячейку tr и извлекает текст, так как это номер эксперимента, который он должен удалить из опций выбора. Поэтому, если пользователь хочет удалить Эксперимент 1, то var exp будет равен 1 или 2 для эксперимента 2.
Тогда var txt будет иметь текст «Эксперимент 1» или «Эксперимент 2» в зависимости от того, какой эксперимент пользователь выбрал для удаления ,

Я отладил эту часть, и все работает нормально, я также проверил компоненты выбора, и у них есть опции Experiment 1 и Experiment 2, как они должны быть.

Затем я пытаюсь удалить параметры из компонентов выбора, используя последние две строки этого кода. Я попытался использовать значение параметра для первого компонента, который в случае Эксперимента 1 равен 1 или 2 для эксперимента 2, а текст варианта для второго компонента, который для эксперимента 1 является в точности экспериментом 1, например.

Дело в том, что эти две последние строки не работают. Согласно отладчику #exp-select option[value="'+exp+'"] имеет длину 0, хотя я могу видеть параметры на компоненте, а один вариант - эксперимент 1 со значением 1, а другой - эксперимент 2 со значением 2. Я также пытался использовать текст вместо значения но он не работает, и он также показывает длину 0.

Любые идеи?

Edit: Добавление выпадающий код

  <div class="row"> 
      <div class="col-sm-6"> 
       <div class="form-group"> 
        <label for="exp_select">Experiment:</label> 
        <select class="form-control select-fill" id="exp_select" title=""> 
         <option></option> 
        </select> 
       </div> 
      </div> 
      </div> 

И это, как я добавить опцию каждый раз, когда

var rowCount = $('#experiment-table tr').length; 
$('#exp_select').append($('<option>', { 
    value: rowCount, 
    text: 'Experiment '+ rowCount 
})); 

Answer 1

Вы можете использовать [attr*=""] атрибут содержит селектор:

$('#exp-select option[value*="'+exp+'"]').remove(); 
$('#expind-select optgroup[text*="'+txt+'"]').remove(); 

---

o г вы можете также использовать .filter() метод:

$('#exp-select option').filter(function(){ 
    return $(this).attr("value").indexOf(exp) != -1; 
}).remove(); 
$('#expind-select optgroup').filter(function(){ 
    return $(this).attr("text").indexOf(txt) != -1; 
}).remove(); 

Answer 2

Используйте .remove() для option[value*=+VAL+]

Из списка выбора найти варианты, которые содержит значение по своему выбору, а затем удалить из DOM

$('#exp-select option[value*="'+exp+'"]').remove();