JavaScript - how to remove `options` by its `value`

Question

I have a dropdown menu with products similiar like this

<select class="fruits" >
  <option value="1" >Oranges</option> 
  <option value="2" >Bananes</option> 
  <option value="3" >Apples</option> 
</select>

I need to remove options by its value. How to do that ?
Pure JavaScript please.

EDIT : I know that I need to use element.removeChild(child) method. But how to reference child by its value. Thats my point.

EDIT 2 : I use the script of zdrohn below and it works. Because I have several fruits dropdowns with the same collection I need to iterate trough all dropdowns and delete it from all dropdowns. This is my code now :

<script type='text/javascript'>

var id = 3;
            var el= document.getElementsByClassName("fruits");
                for (i=0;i<el.length;i++) {
                    for(var n = 0; n < el[i].length; n++) {
                        if(el[i][n].value == id) {
                            el[i][n].remove();
                        }
                }

 </script>

Though it works I wonder about that I do not need to use the parent.removeChild() method. How comes ?

P.S. I wonder that peole vote this question down. As the response shows their are several solutions. Though not all are sufficiantly explained.

Answer 1

Here is a snippet to play with.

The code removes the option with value = 3

window.onload = function() {
  var optionToDelete = document.querySelector("select.fruits > option[value='3']");
  optionToDelete.parentNode.removeChild(optionToDelete);
}

<select class="fruits">
  <option value="1">Oranges</option>
  <option value="2">Bananes</option>
  <option value="3">Apples</option>
</select>