Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
    <!doctype html>
    <html lang="en">
<head>
 <title> </title>
 <meta charset="utf-8">
</head>
<body>
 <form>
 <label for="item">Add an item: </label>
  <input id="item" type="text" size="20"><br>
 <input id="submitButton" type="button" value="Add!">
 </form>
 <ul>
 </ul>
 <p>
 Click an item to remove it from the list.
 </p>  
</body>
</html>
 
 p {
  font-style: italic;
 }
 li:hover {
  cursor: pointer;
 }
 
function Post(item) {
    this.item = item;
    this.print = function() {
        var s = this.item;
        return s;
    };
}
var postList = [];
window.onload = init;
function init() {
    var submitButton = document.getElementById("submitButton");
    submitButton.onclick = getAddedItem;
}
function getAddedItem() {
    var itemInput = document.getElementById("item");
    var item = itemInput.value;
    if (item == null || item == "") {
        alert("Please enter an item");
        return;
    } else {
        var post = new Post(item);
        postList.push(post);
        addPostToList(post);
        var theForm = document.querySelector("form");
        theForm.reset();
    }
    function addPostToList(post) {
        var postList = document.querySelector("ul");
        var li = document.createElement("li");
        li.onclick = removeItem;
        postList.appendChild(li);
        li.innerHTML = post.print();
    }
}
function removeItem(e) {
    e.target.parentElement.removeChild(e.target);
}
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers