SOURCE

$(function () {
    $('#button-add').on('click', function () {
        var item = $('#text-item').val();
        if (item == '') {
            alert('请输入新项目。');
        }
        else {
            getArray(item);
            displayList();
        }
    })

    $('li').on('dblclick', function () {
        this.remove();
    })

    var olArray = new Array();

    function getArray(str) {
        var itemArray = str.split(',');
        olArray.length = 0;
        $('#ol-Anna li').each(
            function () {
                olArray.push($(this).text());
            });
        var flag = false;
        for (i = 0; i < strArray.length; i++) {
            if (olArray.indexOf(itemArray[i]) == -1) {
                olArray.push(itemArray[i]);
            } else {
                flag = true;
            }
        }
        if (flag) {
            alert('请不要输入重复的项目。');
        }
    }

    function displayList() {
        $('#ol-Anna').empty();
        for (i = 0; i < olArray.length; i++) {
            var li = "<li>" + olArray[i] + "</li>";
            console.log(li);
            $('#ol-Anna').append(li);
        }
    }

})

<ol id=ol-Anna>
<li>饼干</li>
<li>西瓜</li>
<li>牛奶</li>
<li>杯子</li>
</ol>

<input id="text-item" type="text" placeholder="请输入新的列表项目"/>
<input id="button-add" type="button" value="新增"/>

#ol-Anna{
    background-color:black;
    color:white;
}

#button-add{
    font-weight:bold;
}