Every new skill you learn is making your app more advanced.
1) Open up your text-editing program. Create a new HTML file called removemore.html. Copy and paste the code from below. Your code will look like this:
[html] <!DOCTYPE html><html>
<head>
<title>To-Do List App</title>
<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
</script>
</head>
<body>
<p>Special Exhibition To-Do List</p>
<br/>
<input type="text" id="box" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/>
<div id="list"></div>
</body>
</html>[/html]
2) Now modify your addItem function in your < head > by setting up the onclick attribute in your function. Add an onclick to every new HTML element. Make your onclick call a new function when it is clicked. Add this new line of code to your < script > block:
[html] <script>function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
}
</script>[/html]
3) Code a second function in your < script > block called removeItem.
The function needs to use getElementById to find the < div > in your < body >.
Then it should use removeChild and the this keyword to remove any item the function calls.
Type out this function so your < script > block now looks like this:
[html] <script>function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
}
function removeItem() {
document.getElementById("list").removeChild(this);
}
</script>[/html]
4) Your finished code block for your app will look like this:
[html] <!DOCTYPE html><html>
<head>
<title>To-Do List App</title>
<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;
document.getElementById("list").appendChild(newItem);
}
function removeItem() {
document.getElementById("list").removeChild(this);
}
</script>
</head>
<body>
<p>Hello World To-Do List</p>
<br/>
<input type="text" id="box" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/>
<div id="list"></div>
</body>
</html>[/html]
5) Save your HTML file and open it in your browser. You can now add and remove items from the list.