title: Removing from a list
body: <p>I have an add user and a remove user button. I have functions that take whatever is in a text-input and add or remove it from a select. This is my js code:</p>
  
  <pre><code>var addedUsers = [];
  
  function add(){
      var form = document.getElementById('form')
      var emailInput = form.elements.typer
      let email = emailInput.value
      emailInput.value = ""
  
      var select = document.getElementById('users')
      var option = document.createElement("option")
      option.text = email
  
      emailInput.focus()
      if (addedUsers.indexOf(email) == -1){
          addedUsers.push(email)       
          select.add(option)
      } else {
          alert("This user is already one of your recipients!");
      }
  }
  
  function rem(){
      var form = document.getElementById('form')
      var emailInput = form.elements.typer
      let email = emailInput.value
      emailInput.value = ""
  
      var select = document.getElementById('users')
      var options = select.options
  
      emailInput.focus()
      if (addedUsers.indexOf(email) != -1){
          for (var i = 2; i &lt; options.length; i++){
              if(email === options[i].innerHTML){
                  select.remove(i)
                  addedUsers.splice(email, 1)
                  break
              }
          }
      } else {
          alert("This user is not already one of your recipients!")
      }
  }
  
  
  
  
  
  
          &lt;form id="form"&gt;
              &lt;div class="recipients"&gt;
                  &lt;input type="text" class="typer" name="typer"&gt;
                  &lt;br&gt;&lt;br&gt;
                  &lt;button onclick="add()" type="button" class="ar"&gt;Add User&lt;/button&gt;
                  &lt;button onclick="rem()" type="button" class="ur"&gt;Remove User&lt;/button&gt;
                  &lt;br&gt;&lt;br&gt;&lt;br&gt;
                  &lt;select id="users" name="users" class="userlist" size="24"&gt;
                      &lt;option class="listhead"&gt;__________*Recipents*__________&lt;/option&gt;
                      &lt;option class="listhead"&gt;-------------------------------&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;   
              &lt;div class="content"&gt;
                  &lt;button onclick="mail()" class="send"&gt;Send&lt;/button&gt;
                  &lt;br&gt;&lt;br&gt;
                  &lt;textarea type:"content" name="content" class="typec" cols="113" rows="12"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>I noticed that I can add nothing at all and remove nothing at all, until an alert comes up. How can I prevent this? Also, if I hit one of the added options in the select, how do I make it show up in the text-input? Thanks!</p>