JavaScript的 - 如何刪除`由其`value`

-3

options`我有一個下拉菜單中的產品similiar這樣JavaScript的 - 如何刪除`由其`value`

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

我需要它value去除options。怎麼做？
純粹的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.我不知道那個人是否把這個問題投下來。正如答案顯示他們有幾個解決方案。雖然並非所有的都能夠充分解釋。

來源

2017-01-11 Ben

你嘗試過什麼嗎？ –

當然。我知道我需要使用element.removeChild（child）。但是如何通過它的價值來引用特定的選項。這纔是重點。 – Ben

'sel.value = 2; sel.options [sel.selectedIndex]卸下襬臂（）' – dandavis

<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; 
 
\t 
 
var select = document.getElementsByClassName('fruits'); 
 

 
for(var i = 0; i < select[0].length; i++) { 
 
\t if(select[0][i].value == valueToRemove) { 
 
\t \t select[0][i].remove(); 
 
\t } 
 
} 
 

 

 

 
</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) { 
 
\t var valueToRemove = item; 
 
\t 
 
\t var select = document.getElementsByClassName('fruits'); 
 

 

 
\t for(var i = 0; i < select[0].length; i++) { 
 
\t \t if(select[0][i].value == valueToRemove) { 
 
\t \t \t select[0][i].remove(); 
 
\t \t } 
 
\t } 
 

 
} 
 

 

 

 
</script>

來源

2017-01-11 18:57:42 zdrohn

這聽起來不錯...但是什麼是'var index = i;'爲什麼？ – Ben

@Ben我只是忘張貼答覆 – zdrohn

之前除去它'選擇[0]'不是數組或節點列表。我想你的意思是'選擇[0] .childNodes'。但是這是一個「活的」集合，所以當你刪除一個選項時，下面所有選項的索引向下移動，然後跳過循環中的下一個選項。 – Barmar

-1

您可以用找到的選項：

var _Compare = 3; 
var _Selected = document.getElementByClassName("fruits"); 
var _SelectedIndex = _Selected.options[_Selected.selectedIndex].value; 
if(_Compare > parseInt(_SelectedIndex)){ 
// Your Code Here if _Compare is greater than _SelectedIndex value } 
if(_Compare < parseInt(_SelectedIndex)){ 
// Your Code Here if _Compare is greater than _selectedIndex value }

檢查，如果值是一個特定的值，然後刪除it.and：使用

_Selected.options[value='1'].remove();

來源

2017-01-11 18:41:05

即第一代碼例如是Jquery的不普通的JavaScript –

可以簡單地使用所述第二代碼的JavaScript，我將更新它爲你是否想。 –

如何比較值'3'和選項的值？請僅使用javaScript。 – Ben

您可以選擇所需選項document.querySelector()和this form

更完整的選擇列表的選擇，可以發現here

Example

來源

2017-01-11 18:45:56

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

來源

2017-01-11 18:47:59 RSHAP

Document.evaluate使用xpath找到東西 – RSHAP

'document.evaluate（）'在IE中不起作用。 – Barmar

哦好吧，很高興知道。但是啊，LJs的回答是更好的 – RSHAP

這是一起玩的一個片段。

代碼取消了option與值= 3

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

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

編輯：基於更新的問題 - 我有幾個水果下拉式選單 。

我們可以利用querySelectorAll選擇所有匹配的元素，並forEach應用在選定列表中的每個元素所需邏輯。

window.onload = function() { 
 
    var optionsToDelete = document.querySelectorAll("select.fruits > option[value='3']"); 
 

 
    optionsToDelete.forEach(function(element, index, array) { 
 
    element.parentNode.removeChild(element); 
 
    }); 
 
}

<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>

來源

2017-01-11 18:50:04

JavaScript的 - 如何刪除`由其`value`

回答

相關問題