How to remove options when clicked on a button

Question

How can i remove options on click of a button that are nested inside an select element?

Is my mistake in for loop ? I can't figure it out

var select = document.getElementById('colorSelect');
var options = document.getElementsByTagName('option');
console.log(options);

function removecolor() {
  for (var i = 0; i < options.length; i++) {
    console.log(select.value);
    //Here i need to delete option value that is selected
  }
}

<form>
  <select id="colorSelect">
    <option>Red</option>
    <option>Green</option>
    <option>White</option>
    <option>Black</option>
  </select>
  <input type="button" onclick="removecolor()" value="Select and Remove"><br>
</form>

I would recommend you to enter the colors from Javascript, then removing colors, or adding colors, would be easier to achieve. — assembler, Nov 11 '21 at 13:48
hmm i doing homework and my professor gave it in the html so i can't change it — itmemilan, Nov 11 '21 at 13:48
Does this answer your question? [Remove values from select list based on condition](https://stackoverflow.com/questions/12932959/remove-values-from-select-list-based-on-condition) — Liam, Nov 11 '21 at 13:49

score 0 · Accepted Answer · answered Nov 11 '21 at 13:50

Just use .remove

const select = document.getElementById('colorSelect');

document.getElementById("remove").addEventListener("click",function() {
  const opt  = select.options[select.selectedIndex];
  if (opt) opt.remove()
})

<form>
  <select id="colorSelect">
    <option>Red</option>
    <option>Green</option>
    <option>White</option>
    <option>Black</option>
  </select>
  <input type="button" id="remove" value="Select and Remove"><br>
</form>

If you are not allowed to change the HTML and event handler you can do

const select = document.getElementById('colorSelect');

function removecolor() {
  const opt  = select.options[select.selectedIndex];
  if (opt) opt.remove()
}

<form>
  <select id="colorSelect">
    <option>Red</option>
    <option>Green</option>
    <option>White</option>
    <option>Black</option>
  </select>
  <input type="button" onclick="removecolor()" value="Select and Remove"><br>
</form>

score 0 · Answer 2 · answered Nov 11 '21 at 14:04

0

The linked question will solve your problem, with a slight changes.

Here values are removed using oninput event

var selectobject = document.getElementById("colorSelect");

function func() {
  console.log(selectobject.value)
  selectobject.options[selectobject.selectedIndex].remove();

}

<select id="colorSelect" oninput="func()">
  <option>Red</option>
  <option>Green</option>
  <option>White</option>
  <option>Black</option>
</select>

answered Nov 11 '21 at 14:04

Rana

2,500
2
7
28

Here values are removed `oninput` event, you must figure out using button click and it is your homework now. – Rana Nov 11 '21 at 14:07

How to remove options when clicked on a button

2 Answers2