Remove Selected Value in Dropdown List Using JavaScript

Question

I have an HTML list that I want to remove elements from as the user chooses. I've tried using this code from this thread but my issue seems to be accessing the element. Here's my 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>

And here's my 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])
}

I have several instances of the remove() method but that none of them work. However, the best way I can convey my error to you is through JSFiddle.

Tushar · Accepted Answer · 2017-01-30T03:16:18.450

As you've jQuery loaded on the page, use it to bind events and remove element from DOM.

First, bind click event on the button using click. Use the :selected pseudo-selector to select the selected option from the dropdown and remove() to remove it from 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

Note that there are several issues in your code

In fiddle "LOAD TYPE" option should be selected to "No Wrap".
jQuery is not included. This can be included using the "Frameworks & Extensions" option in the JavaScript tab
Syntax error in the first statement in the placeShip() near .value;);
shipList is local to the ready callback and hence not accessible from outside of it. Not even in placeShip()

With pure JavaScript

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

Fiddle

If you're curious, the reason I chose this is because you included a pure JavaScript solution. I did notice that I couldn't put `var shipList = document.getElementById('shipSelec');` into this function: `document.addEventListener('DOMContentLoaded', function() {});` and expect it to work. If you're willing & able, could you explain why that is? — Larrimus, Jan 30 '17 at 17:08
@Larrimus Please check [this demo](https://jsfiddle.net/tusharj/eLfcpomj/1/). Again, if you define a variable with `var` in a function, it is not accessible outside of that function. So, accessing the variable outside will give `undefined`. [What is the scope of variables in JavaScript?](//stackoverflow.com/q/500431) and to understand it deeply see [You don't know JS - Scope & Closures](https://escher.gitbooks.io/you-don-t-know-js-scope-closures/content/ch1.html) book. — Tushar, Jan 31 '17 at 03:25

score 0 · Answer 2 · answered Jan 30 '17 at 03:13

$("#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>

I suggest just disable the option not remove

[Disabling doesn't change the selected option](https://jsfiddle.net/tusharj/yrygxtps/1/), not what OP want. To overcome, you can select first non`:disabled` option. — Tushar, Jan 30 '17 at 03:34

Remove Selected Value in Dropdown List Using JavaScript

2 Answers2