Javascript List: Delete and Edit items function?
<p>I need to make a Javascript To Do list (checklist, without jQuery), which I have already completed, but I cannot figure out how to make an edit and delete button also appear with each of the items the are entered. <a href="http://i.stack.imgur.com/WAwDl.png" rel="nofollow">This is what I ave so far</a></p>

<pre><code>    &lt;!doctype html&gt;
        &lt;html&gt;
        &lt;head&gt;
        &lt;title&gt;To Do List&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="ToDoList.css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
        &lt;h1&gt; To Do List&lt;/h1&gt;

        &lt;input type="text" id="inItemText"&gt;&lt;button id = "btnAdd"&gt;Add&lt;/button&gt;

        &lt;div class="tasks-parent"&gt;
      &lt;h4&gt;Tasks:&lt;/h4&gt;
        &lt;ul id = "todolist"&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
        &lt;script src ="ToDoList.js"&gt;&lt;/script&gt;
        &lt;/body&gt;
        &lt;/html&gt;

        #btnAdd {
        text-transform: uppercase;
        background: #22B473;
        border: none;
        border-radius: 3px;
        font-weight: bold;
        color: #FFF;
        padding: 3px 10px;
        width: auto;
        }

        .tasks-parent{
            border: 2px solid #777;
            margin-top: 5px;
            width: 16.2%;
        }


        html{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        ul{
            width: 400px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        li{
         padding: 5px 10px;
         color: #000;

        }

        li span {
        padding-left: 10px;
        }

        function updateItemStatus(){
            var cbId = this.id.replace("cb_", "");
            var itemText = document.getElementById("item_" + cbId);

            if(this.checked){
            itemText.style.textDecoration = "line-through";
            } 
            else{
            itemText.style.textDecoration = "none";
            }

        }



        function addNewItem(list, itemText) {

            totalItems++

            var date = new Date();
            var id = "" + date.getMinutes(); + date.getSeconds() +                                                date.getMilliseconds() + "";

        var listItem = document.createElement("li");
        listItem.id = "li_" + id;

        var checkBox = document.createElement("input");
        checkBox.type = "checkbox";
        checkBox.id = "cb_" + totalItems;
        checkBox.onclick = updateItemStatus;

        var span = document.createElement("span");
        span.id = "item_" + totalItems;
        span.innerHTML = itemText;

        var edit = document.createElement("a");
        edit.href = "#";
        edit.innerHTML = " edit |";

        var deleteBtn = document.createElement("a");
        deleteBtn.href = "#";
        deleteBtn.innerHTML = " delete";


        listItem.appendChild(checkBox);
        listItem.appendChild(span);
        listItem.appendChild(edit);
        listItem.appendChild(deleteBtn);

        list.appendChild(listItem);
    }


    var totalItems = 0;

    var inItemText = document.getElementById("inItemText");
    inItemText.focus();

    var btnNew = document.getElementById("btnAdd");
    btnNew.onclick = function(){
        var inItemText = document.getElementById("inItemText");

        var itemText = inItemText.value;
        if(!itemText || itemText === "" || itemText === " "){
    return false;
        }

        addNewItem(document.getElementById("todolist"), itemText);
    };

    inItemText.onkeyup = function(event) {

        if(event.which == 13){
        var itemText = inItemText.value;

        if(!itemText || itemText === "" || itemText === " "){
            return false;
        }

        addNewItem(document.getElementById("todolist"), itemText);

        inItemText.focus();
        inItemText.select();
    }

    };

    deleteBtn.onclick = function removeItem() {
     var elem = document.getElementById("item_");
     elem.parentNode.removeChild(elem);
    }
</code></pre>