javascript - 使用 JavaScript 删除下拉列表中的选定值

Question

我有一个 HTML 列表，我想根据用户的选择从中删除元素。我尝试使用 this thread 中的代码但我的问题似乎是访问该元素。这是我的 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() 方法的实例，但它们都不起作用。但是，我向您传达错误的最佳方式是 through JSFiddle .

Answer 1

当您在页面上加载 jQuery 时，使用它来绑定(bind)事件并从 DOM 中删除元素。

首先，使用click绑定(bind)按钮上的点击事件。使用 :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>

Updated Fiddle

---

请注意，您的代码中有几个问题

1. 在 fiddle “加载类型”选项应选择“无换行”。
2. 不包括 jQuery。可以使用 JavaScript 选项卡中的“框架和扩展”选项来包含此内容
3. .value;); 附近的 placeShip() 中的第一条语句存在语法错误
4. shipList 是 ready 回调本地的，因此无法从外部访问。即使在 placeShip()
中也不行

---

使用纯 JavaScript

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

Fiddle