Javascript-форум - Выпадающий список с возможностью добавлять/удалять элементы

Здравствуйте, помогите со скриптом, тока я уже боюсь что написал такое, что и редактировать будет проблемно)

Есть скрипт выпадающего списка в который можно добавлять элементы, но надо еще добавить возможность удалять элементы. Т.е. должна быть еще одна кнопка, при нажатии на которую будет удален элемент с именем, который расположен в текстовом поле.

Создать радиокнопки, которые заменят кнопки «Добавить», «Удалить». Т.е. этими переключателями пользователь должен выбирать что хочет сделать, а затем нажать кнопку «Применить», которая обработает состояние переключателей и выполнит нужное действие.

JS

var textarray = new Array("Один", "Два", "Три", "Четыре");
    
    function toggle (id, display) {
      var citylist = document.getElementById(id);
      
      if (citylist.style.display == 'none' && display == '') {
        citylist.innerHTML = '';
        for(var i=0; i<textarray.length; i++) {
          var newDiv = document.createElement('div');
          newDiv.innerHTML = textarray[i];
          newDiv.onmousedown = function () {
            var city = document.getElementById('city');
            city.value = this.innerHTML;
            city.blur();
          }
          citylist.appendChild(newDiv);
        }
      }  
      
      citylist.style.display = display;    
    }
    
    window.onload = function () {
      var city = document.getElementById('city');
      var button = document.getElementById('button');
      
      var newDiv = document.createElement('div');
      newDiv.style.position = "absolute";
      newDiv.style.width = city.style.width;
      newDiv.id = 'citylist';
      city.parentNode.insertBefore(newDiv, city.nextSibling);
    
      toggle ('citylist', 'none');
      
      city.onfocus = function () {
          toggle ('citylist', '');
      }
      city.onblur = function () {
        toggle ('citylist', 'none');
      }

      button.onclick = function () {
        textarray.push(city.value);
        textarray.sort();
        city.value = '';
        city.blur();
      }
    }

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
	<style type="text/css">
    #citylist {
      margin: 0 2px;
    }
    #citylist div {
      border: 1px solid grey;
      margin: 1px;
      padding: 2px 4px;
      font-size: smaller;
      cursor: pointer;
    }
    #citylist div:hover {
      background: #eee;
    }
	</style>

</head>
<body>
  <form name="main">
    <input id="city" type="text" value="" style="width: 200px;" />
    <input id="button" type="button" value="Добавить" style="width: 100px;" />
  </form>
</body>
</html>