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.

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.