<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 xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |