01.Add/RemoveTown

<!-- JS Advanced Exam @ SoftUni - 13-Nov-2016 -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Add / Remove Towns</title>
    <style>select, input { width: 100px }</style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body onload="attachEvents()">

<div>Towns</div>
<select id="towns" size="4">
    <option>Sofia</option>
    <option>Varna</option>
    <option>Pleven</option>
</select>

<button id="btnDelete">Delete</button>

<div>
    <input type="text" id="newItem" />
    <button id="btnAdd">Add</button>
</div>

<script>
    function attachEvents() {
        let addButton = $('#btnAdd');
        let deleteButton = $('#btnDelete');
        let newItem = $('#newItem');
        let townsList = $('#towns');

        addButton.on('click', function () {
            if (newItem.val() !== ''){
                let newOption = $('<option>');
                newOption.text(newItem.val());
                townsList.append(newOption);
                newItem.val('');
            }
        })

        deleteButton.on('click', function () {
            let townToDelete = $('option:selected');
            townToDelete.remove();
        })
    }
</script>
</body>
</html>