Удалить элемент из выпадающего меню с помощью jQuery не работает

Question

Я нашел несколько тем об удалении элементов из выпадающего элемента HTML.Однако, когда я пытаюсь это сделать, он не работает из сценария, но работает в консоли в браузере.

Остальная часть сценария работает нормально, и никаких ошибок не возвращается.Сначала у меня есть переменная с текстом элемента, я позволяю jQuery получить соответствующее значение, и с этим значением я удаляю элемент.

var topicToDelete = "topic3";
console.log(topicToDelete); //returns "topic3"
var dropdownValue = $('#pick_topic option').filter(function() {
  return $(this).html() == topicToDelete;
}).val();
console.log(dropdownValue); //returns nothing
$('#pick_topic').find('option[value=' + dropdownValue + ']').remove(); //doesn't do anything

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pick_topic">
  <option value="1">topic1</option>
  <option value="2">topic2</option>
  <option value="3">topic3</option>
</select>

Непосредственное выполнение кода также не работает:

$('#pick_topic option').filter(function () { return $(this).html() == topicToDelete; }).remove(); // nothing

Однако, когда я ввожу строки в консоли браузера, строкаЛиния это работает, и элемент удаляется из выпадающего меню.Как это может быть?

Я также изучил этот ответ.

Answer 1

Проблема в том, что вы указали # в значении атрибута id, в результате чего ваш селектор jQuery не соответствует ничему.Это должно быть удалено.

var topicToDelete = "topic3";
//console.log(topicToDelete); //returns "topic3"

var dropdownValue = $('#pick_topic option').filter(function() {
  return $(this).html() == topicToDelete;
}).val();

//console.log(dropdownValue); //returns nothing
$('#pick_topic').find('option[value=' + dropdownValue + ']').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pick_topic"> <!-- note: no # here -->
  <option value="1">topic1</option>
  <option value="2">topic2</option>
  <option value="3">topic3</option>
</select>

При этом вы слишком усложняете решение.filter() возвращает объект jQuery, который вы можете удалить напрямую.Нет необходимости получать значение из этого объекта, а затем создавать другой объект jQuery, указывающий на элемент, к которому у вас уже есть доступ.Попробуйте это:

var topicToDelete = "topic3";

$('#pick_topic option').filter(function() {
  return $(this).html() == topicToDelete;
}).remove();

// alternative, using :contains which is a greedy match:
// $('#pick_topic option:contains(' + topicToDelete + ')').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pick_topic">
  <option value="1">topic1</option>
  <option value="2">topic2</option>
  <option value="3">topic3</option>
</select>

Answer 2

Ваш код был хорош, но удалите # из id="pick_topic"

var topicToDelete = "topic3";
console.log(topicToDelete); //returns "topic3"
var dropdownValue = $('#pick_topic option').filter(function () { return $(this).html() == topicToDelete; }).val();
console.log(dropdownValue); //returns nothing
$('#pick_topic').find('option[value=' + dropdownValue + ']').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pick_topic">
    <option value="1">topic1</option>
    <option value="2">topic2</option>
    <option value="3">topic3</option>
</select>