使用JavaScript刪除下拉列表中的選定值

Question

我有一個HTML列表，我想從用戶選擇中刪除元素。 我試過從這個線程使用這個代碼，但我的問題似乎是訪問該元素。 這是我的HTML：

<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
    <option value="aircraftCarrier">Aircraft Carrier</option>
    <option value="battleship">Battleship</option>
    <option value="cruiser">Cruiser</option>
    <option value="destroyer">Destroyer</option>
    <option value="destroyer">Destroyer</option>
    <option value="submarine">Submarine</option>
    <option value="submarine">Submarine</option>
</select>
<button type="button" onclick="placeShip()">Remove Selected Ship</button>

這是我的JavaScript：

$( document ).ready(function() {
   var shipList=document.getElementById('shipSelec');
});
function placeShip() {
  shipList.remove(shipList.options[shipList.selectedIndex].value;);
  shipList.remove(shipList.options[shipList.selectedIndex]);
  shipList.remove(shipList.options[selectedIndex]);
  shiplist.remove([shipList.selectedIndex])
}

我有幾個remove()方法的實例，但沒有一個工作。 但是，我可以通過JSFiddle向我傳達錯誤的最佳方式。

Answer 1

當您在頁面上加載jQuery時，使用它來綁定事件並從DOM中刪除元素。

首先，使用click在按鈕上綁定單擊事件。 使用:selected偽選擇器從下拉列表中選擇所選選項，並使用remove()將其從DOM中刪除。

$('button').click(function() {
    $('#shipSelec option:selected').remove();
});

 $(document).ready(function() { $('button').click(function() { $('#shipSelec option:selected').remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ShipPlacement"> Ship: <select name="shipSelec" id="shipSelec"> <option value="aircraftCarrier">Aircraft Carrier</option> <option value="battleship">Battleship</option> <option value="cruiser">Cruiser</option> <option value="destroyer">Destroyer</option> <option value="destroyer">Destroyer</option> <option value="submarine">Submarine</option> <option value="submarine">Submarine</option> </select> <button type="button">Remove Selected Ship</button> </div> 

更新小提琴

---

請注意，您的代碼中存在多個問題

1. 在小提琴中， “LOAD TYPE”選項應選擇為“No Wrap”。
2. jQuery不包括在內。 這可以使用JavaScript選項卡中的“框架和擴展”選項包含在內
3. placeShip()中第一個語句中的語法錯誤.value;);
4. shipList是ready回調的本地，因此無法從其外部訪問。 甚至沒有在placeShip()

---

使用純JavaScript

var shipList = document.getElementById('shipSelec');
shipList.options[shipList.selectedIndex].remove();

小提琴

Answer 2

 $("#btn").click(function() { $("#shipSelec option:disabled").prop("disabled", false) $("#shipSelec option:selected").prop("disabled", true) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ShipPlacement"> Ship: <select name="shipSelec" id="shipSelec"> <option value="aircraftCarrier">Aircraft Carrier</option> <option value="battleship">Battleship</option> <option value="cruiser">Cruiser</option> <option value="destroyer">Destroyer</option> <option value="destroyer">Destroyer</option> <option value="submarine">Submarine</option> <option value="submarine">Submarine</option> </select> <button type="button" id="btn">Remove Selected Ship</button> 

我建議只禁用該選項不刪除