删除基于文本而不是值的选项答案

【问题标题】：Removing an option based on text instead of value删除基于文本而不是值的选项
【发布时间】：2021-10-15 20:07:39
【问题描述】：

我想根据选项的文本从选择中删除一个选项。

我尝试使用这行代码：

$('#list_' + id + ' option[text="' + alias + '"]').remove();

遗憾的是，这对我不起作用，因为它不会删除任何内容。如果我使用value 而不是text 它可以工作，但我想知道如何使用text 来做到这一点。

// Removing based on text doesnt work.

$('.removeByText').click(function() {

    $('#list option[text="Option2"]').remove();

});

// Removing based on value works.

$('.removeByValue').click(function() {

    $('#list option[value="2"]').remove();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id='list'>
  <option value='1'>Option1</option>
  <option value='2'>Option2</option>
  <option value='3'>Option3</option>
  <option value='4'>Option4</option>
</select>

<button class='removeByText'>removeByText</button>

<button class='removeByValue'>removeByValue</button>

【问题讨论】：

创建一个minimal reproducible example的问题
使用问题编辑器的现场演示功能。
我在现场演示功能中做了一个示例，希望对您有所帮助。谢谢！

标签： javascript jquery select

【解决方案1】：

option 元素没有text 属性。如果你想这样做，你可以使用:contains：

$("#list_" + id + " option:contains(" + alias + ")").remove();

...但这确实是子字符串匹配。可能你会想filter:

$("#list_" + id + " option")
    .filter(function() {
        return this.textContent === alias;
    })
    .remove();

使用filter 的实时示例：

setTimeout(() => {
    const id = "example";
    const alias = "B";
    console.log(`Removing '${alias}'...`);
    $("#list_" + id + " option")
        .filter(function() {
            return this.textContent === alias;
        })
        .remove();
}, 800);

<select id="list_example" size="3">
<option>A</option>
<option>B</option>
<option>C</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：