Question

我有一个下拉菜单，其中包含与此类似的产品

<select class="fruits" >
  <option value="1" >Oranges</option> 
  <option value="2" >Bananes</option> 
  <option value="3" >Apples</option> 
</select>

我需要options删除value。怎么做？
请使用纯JavaScript。

编辑：我知道我需要使用element.removeChild(child)方法。但是如何通过value来引用孩子。多数民众赞成我的观点。

编辑2：我使用下面zdrohn的脚本，它可以工作。因为我有几个具有相同集合的fruits下拉列表，我需要通过所有下拉列表进行迭代并从所有下拉列表中删除它。这是我现在的代码：

<script type='text/javascript'>

var id = 3;
            var el= document.getElementsByClassName("fruits");
                for (i=0;i<el.length;i++) {
                    for(var n = 0; n < el[i].length; n++) {
                        if(el[i][n].value == id) {
                            el[i][n].remove();
                        }
                }

 </script>

虽然它有效但我想知道我不需要使用parent.removeChild()方法。怎么来的？

P.S。我不知道peole会把这个问题投下来。由于回应显示他们有几种解决方案。虽然并非所有人都能得到充分的解释。

Answer 1

这是一个可以玩的片段。

代码会删除option value = 3

＆＃13;

window.onload = function() {
  var optionToDelete = document.querySelector("select.fruits > option[value='3']");
  optionToDelete.parentNode.removeChild(optionToDelete);
}

＆＃13;

<select class="fruits">
  <option value="1">Oranges</option>
  <option value="2">Bananes</option>
  <option value="3">Apples</option>
</select>

＆＃13;

编辑：根据更新的问题 - 我有几个水果下拉菜单。

我们可以使用querySelectorAll选择所有匹配的元素，并使用forEach在所选列表中的每个元素上应用所需的逻辑。

＆＃13;

window.onload = function() {
  var optionsToDelete = document.querySelectorAll("select.fruits > option[value='3']");

  optionsToDelete.forEach(function(element, index, array) {
    element.parentNode.removeChild(element);
  });
}

＆＃13;

<select class="fruits">
  <option value="1">Oranges</option>
  <option value="2">Bananes</option>
  <option value="3">Apples</option>
</select>

<select class="fruits">
  <option value="1">Seville oranges</option>
  <option value="2">Burro Bananes</option>
  <option value="3">Baldwin Apples</option>
</select>

<select class="fruits">
  <option value="1">Bergamot oranges</option>
  <option value="2">Red Bananes</option>
  <option value="3">Gravenstein Apples</option>
</select>

＆＃13;

Answer 2

<select class="fruits" >
  <option value="1" >Oranges</option> 
  <option value="2" >Bananas</option> 
  <option value="3" >Apples</option> 
</select>

<script type='text/javascript'>

var valueToRemove = 1;
	
var select = document.getElementsByClassName('fruits');

for(var i = 0; i < select[0].length; i++) {
	if(select[0][i].value == valueToRemove) {
		select[0][i].remove();
	}
}



</script>

编辑：

<select class="fruits" >
  <option value="1">Oranges</option> 
  <option value="2">Bananas</option> 
  <option value="3">Apples</option> 
</select>

<br>

<label>Input value to delete</label><input type='text' id='delete_value'>
<button onclick='remove(document.getElementById("delete_value").value)'>Delete</button>

<script type='text/javascript'>




function remove(item) {
	var valueToRemove = item;
	
	var select = document.getElementsByClassName('fruits');


	for(var i = 0; i < select[0].length; i++) {
		if(select[0][i].value == valueToRemove) {
			select[0][i].remove();
		}
	}

}



</script>

Answer 3

您可以使用document.querySelector()和this form

选择器选择所需的选项

可以找到更完整的选择器列表here

Example

Answer 4

var element = document.evaluate( '//option[@value="1"]' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
element.parentNode.removeChild(element)

JavaScript - 如何通过`value`删除`options`

4 个答案: