Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
    <head>
        <title>Todo List</title>
    </head>
    <body>
        <input type="text" id="item"><br />
        <input type="button" name="add" value="Add" id="add">
        <ul id="list">
            <li><a href="#">Go to the store.</a></li>
            <li><a href="#">Visit family.</a></li>
        </ul>
        <div id="feedback"></div>
        <script type="text/javascript" src="todo.js"></script>
    </body>
</html>
 
var item, list, feedback;
item = document.getElementById("item");
list = document.getElementById("list");
feedback = document.getElementById("feedback");
function addToList() { 
    var linkToElement = document.createElement("a"),
        newElement = document.createElement("li");
    newItem = item.value
    newElement.innerHTML = newItem;
    linkToElement.appendChild(newElement);
    list.appendChild(linkToElement);
    feedback.innerHTML = "Item added.";
}
function removeFromList(e) {
    var target, elParent, elGrandparent;
    target = e.target;
    elParent = target.parentNode;
    elGrandparent = target.parentNode.parentNode;
    elGrandparent.removeChild(elParent);
    e.preventDefault();
    feedback.innerHTML = "Item removed.";
}
list.addEventListener("click", function (e) {
    removeFromList(e);
}, false);
var btn = document.getElementById("add");
btn.addEventListener("click", addToList, false);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers