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?
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>