使用 vanilla JavaScript 选择和删除 html 选择选项而不按索引或 ID 选择答案

【问题标题】：Selecting and removing a html select option without selecting by index or ID, using vanilla JavaScript使用 vanilla JavaScript 选择和删除 html 选择选项而不按索引或 ID 选择
【发布时间】：2015-06-23 08:45:13
【问题描述】：

我需要删除选择框上的一个选项，并且我在下面的代码中找到了一个潜在的解决方案，但感觉不是特别“安全”（如果另一个开发人员决定向后端添加一个选项，该选项将重新出现）。有没有更好的方法可以在不借助 jQuery 的情况下实现这一点？

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

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

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

然后，为了更加安全，我使用了一个 if 语句来仔细检查我选择的选项是否具有正确的文本。

有什么我想念的简单的东西可以添加吗？我无法通过搜索网络，仅通过类名或 ID 仅通过值来选择选项。

【问题讨论】：

我会考虑循环选择项目并在循环内进行比较，因此如果项目移动索引它仍然会被删除。

标签： javascript function select options

【解决方案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);
        }
    }       
})();

【讨论】：

看起来很完美！我没有意识到您可以在循环中使用 if 块来删除该循环中的特定选项，而无需使用一些时髦的“this”关键字:)

【解决方案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;
        }
    }
})();

【讨论】：

【解决方案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;
	}	
}

【讨论】：