5 - 4

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Четврта задача</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>


    <style>
        span {
            background-color: #aed852;
            border-top: 1px solid black;
            border-bottom: 1px solid black
        }
        #newItemInput {
            margin: 10px 0;
        }
        #items {
            width: 450px;
        }
        .ui-widget-content {
            background-color: white;
            border: 1px solid grey;
        }
        #niza .ui-selecting {
            background: #aed852;
        }
        #niza .ui-selected {
            background: #92bb4b;
            color: white;
        }
        #niza {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%; }
        #niza li { margin: 3px;
            padding: 0.4em;
            font-size: 1.4em;
            height: 18px;
        }
    </style>
    <script>
        $(function() {
            $( "#niza" ).selectable({
                stop: function() {
                    var result = $( "#select-result" ).empty();
                    $( ".ui-selected", this ).each(function() {
                        var index = $( "#niza").find("li" ).index( this );
                        result.append($(this).text() + " ");
                    });
                }
            });
        });

        $(document).ready(function() {
            $("#addItem").click(function() {
                var itemName = $("#newItemInput").val();
                $("#niza").append("<li class=' ui-widget-content selective ui-selectee'>" + itemName + "</li>");
            });

            $("#deleteItem").click(function(){
                $(".ui-selected").hide();
            })
        });
    </script>
</head>
<body>

    <div>
        <label>New Item:</label><br>
        <input id="newItemInput">
    </div>

    <button id="addItem">Add new Item</button>
    <button id="deleteItem">Delete selected Items</button>

    <p>
        <span>Selected items:</span> <span id="select-result"></span>
    </p>

    <div id="test"></div>

    <div id="items">
        <ol id="niza">
            <li class="ui-widget-content">Item 1</li>
            <li class="ui-widget-content">Item 2</li>
            <li class="ui-widget-content">Item 3</li>
            <li class="ui-widget-content">Item 4</li>
            <li class="ui-widget-content">Item 5</li>
        </ol>
    </div>
</body>
</html>