选择和删除 html select 选项而不 select 按索引或 ID，使用香草 JavaScript

Question

我需要删除 select 框上的一个选项，我已经在下面的代码中找到了一个潜在的解决方案，但感觉并不特别 'safe' （如果另一个开发人员决定向后端添加一个选项，该选项将重新出现）。有没有更好的方法可以在不诉诸 jQuery 的情况下实现这一目标？

(function (){
    var parent = document.getElementById("MediaCategory");
    var child = parent.children[8];

    if(parent.options[8].text === "Archive") {
        parent.removeChild(child);
        }
})();

如我所见，我正在 selecting select 表单元素的 ID 并将其存储在一个变量中，我还存储了 [=25] 的第 9 个子元素=]，这是我要删除的选项。

然后为了额外的安全，我在 if 语句中卡住了，以仔细检查我 selecting 的选项是否有正确的文本。

有什么我遗漏的简单的东西可以添加吗？我无法通过搜索网络，仅通过 class 名称或 ID 找到仅通过值 select 选项的方法。

Answer 1

是这样的吗？

(function (){
    var parent = document.getElementById("MediaCategory");

    for(var i=0; i< parent.children.length; i++){
        var child = parent.children[i];

        if(child.text === "Archive") {
            parent.removeChild(child);
        }
    }       
})();

Answer 2

我会遍历所有选项，并在您找到该选项时将其删除。一旦找到要删除的选项，break 语句将停止循环。

(function (){
    var parent = document.getElementById("MediaCategory");

    for (var i=0; i<parent.children; i++){
        if (parent.children[i].text === "Archive") {
            parent.removeChild(parent.children[i]);
            break;
        }
    }
})();

Answer 3

var parent = document.getElementById("MediaCategory");
for (var i=0; i<parent.options.length;i++) {
 if (parent.options[i].text == 'Archive') {
  parent.remove(i);
                break;
 } 
}

选择和删除 html select 选项而不 select 按索引或 ID，使用香草 JavaScript

Selecting and removing a html select option without selecting by index or ID, using vanilla JavaScript

javascript

select

function

options