Site icon MiltonMarketing.com – Bernard Aybout's Blog

Removing more than one HTML element

To-Do-List

To-Do-List

Removing more than one HTML element: Now you can remove a HTML element using the removeChild method.

But what happens if user wants to remove more than one item from his list?

We need to use the DOM and JavaScript so that all the items can be removed from the list when they’re clicked.

To do this we need to add an onclick attribute every time we use the createElement method. You can use a DOM method to set the onclick by using the onclick keyword:

[html] .onclick[/html]

We can then set our onclick to call a function that will remove the item when it is clicked, 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>Special Exhibition To-Do List</p>
<input type="text" id="box" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<div id="list"></div>
</body>
</html>[/html]

In this example, we’ve created a new < div > using createElement. We’ve stored the < div > in a variable so we can set its innerHTML to whatever item has been typed into the text box.

We then use the DOM to set the onclick attribute of the new item. When this item is clicked, it will call the removeItem function and the item will be removed from the list.

Use your new knowledge to make an app where more than one HTML element can be removed when it’s clicked.

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.

Exit mobile version