如何使用jQuery或JavaScript移除无value属性的下拉列表选项

你之前的代码无效，是因为这些<option>没定义value属性，用[value='Three']这种属性选择器自然匹配不到。当<option>没设置value时，它的value值会默认等于标签内的文本，但直接用属性选择器还是不生效，得换匹配文本的方式，下面是具体解决办法：

用jQuery实现 #

模糊匹配文本（简单场景） #

用:contains()选择器匹配包含指定文本的选项，适合不需要严格匹配的场景：

$("#select1 option:contains('Three')").remove();

注意：如果有选项文本包含"Three"（比如"ThreeTest"）也会被选中，要是需要精确匹配就用下面的方法。

精确匹配文本 #

用.filter()方法严格匹配选项的文本内容，还能处理文本前后的空格：

$("#select1 option").filter(function() {
  return $(this).text().trim() === "Three";
}).remove();

用原生JavaScript实现 #

遍历选项精准删除 #

倒序遍历所有选项，避免删除后索引错乱：

const selectEle = document.getElementById('select1');
for (let i = selectEle.options.length - 1; i >= 0; i--) {
  if (selectEle.options[i].text.trim() === "Three") {
    selectEle.remove(i);
  }
}

伪类匹配（兼容性有限） #

如果你的目标浏览器支持:has-text()伪类，也可以用这种更简洁的写法，但注意它的支持度不如遍历方法：

const targetOption = document.querySelector("#select1 option:has-text('Three')");
if (targetOption) {
  targetOption.remove();
}

内容的提问来源于stack exchange，提问作者Coozywana