Delete some elements in JavaScript

Question

I'd like to delete Barcelona and Madrid items from my tag select with JavaScript.

My code HTML

<select id="menu">
    <option value="Select">Select</option>
    <option value="Madrid">Madrid</option>
    <option value="Barcelona">Barcelona</option>
    <option value="Sevilla">Barcelona</option>

</select>

My code JS

menu.textContext = " ";

I tried menu.textContext, However it doesn't work because it deletes everything.

Does someone know how I can do this?

[Duplicate](//google.com/search?q=site%3Astackoverflow.com+js+delete+select+options+by+value) of [Remove Select Option with Specific Value Using Prototype JS](/q/41112624/4642212). ``[ "Madrid", "Barcelona" ].forEach((value) => document.querySelector(`#menu > [value='${value}']`).remove());``. — Sebastian Simon, Sep 11 '21 at 19:06

Spectric · Answer 1 · 2021-09-11T19:13:44.170

You can use querySelectorAll to select all option tags with a specific value property:

menu.querySelectorAll('option[value="Barcelona"],option[value="Madrid"]').forEach(e => e.remove())

<select id="menu">
  <option value="Select">Select</option>
  <option value="Madrid">Madrid</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Sevilla">Barcelona</option>

</select>

Alternatively, you can store the values you wish to delete in an array, select all option tags, loop through each and check whether the array includes its value. If so, delete that element:

const valuesToDelete = ['Madrid', 'Barcelona'];

menu.querySelectorAll('option').forEach(e => valuesToDelete.includes(e.value) ? e.remove() : '')

<select id="menu">
  <option value="Select">Select</option>
  <option value="Madrid">Madrid</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Sevilla">Barcelona</option>

</select>

Delete some elements in JavaScript

1 Answers1