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
– assembler, Commented Nov 11, 2021 at 13:48
hmm i doing homework and my professor gave it in the html so i can't change it — itmemilan
– itmemilan, Commented Nov 11, 2021 at 13:48
Does this answer your question? Remove values from select list based on condition — Liam
– Liam, Commented Nov 11, 2021 at 13:49

mplungjan · Accepted Answer · 2021-11-11 13:50:56Z

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>

Yupma · Accepted Answer · 2021-11-11 14:04:47Z

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>

Here values are removed oninput event, you must figure out using button click and it is your homework now.

Collectives™ on Stack Overflow

How to remove options when clicked on a button

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related