To Do List with Delete
How do I make an to do list with delete?
What is a to do list with delete? How do you make a to do list with delete? This script and codes were developed by Matt Brody on 15 January 2023, Sunday.
To Do List with Delete - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>To Do List with Delete</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <title>To Do List With Delete</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <h1>To Do List With Delete onclick</h1> <form id="todoForm"> <div class="form-group"> <input id="todoInput" class="form-control"> </div> <div class="form-group"> <button type="button" onclick="todoList()" class="btn btn-primary btn-lg">click me</button> </div> </form> <ol id="todoList"> </ol> </div> </div> </div> <script src="js/main.js"></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
To Do List with Delete - Script Codes CSS Codes
body { text-align: center;
}
h1 { margin-bottom: 50px;
}
input { margin-bottom: 40px;
}
li { text-align: left; font-size: 20px;
}
To Do List with Delete - Script Codes JS Codes
function todoList() { var item = document.getElementById("todoInput").value var text = document.createTextNode(item) var newItem = document.createElement("LI") newItem.className = "todoClass" newItem.setAttribute("onclick", "remove()") newItem.appendChild(text) document.getElementById("todoList").appendChild(newItem)
}
function remove() { this.parentNode.removeChild(this)
}
Developer | Matt Brody |
Username | mattlbrody |
Uploaded | January 15, 2023 |
Rating | 3 |
Size | 2,068 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Zodiac App | 2,628 Kb |
Gallery App with JS | 2,453 Kb |
JavaScript Survey | 2,568 Kb |
Book Finder API using ajax | 2,489 Kb |
Comment App | 2,137 Kb |
Simple Quiz App | 2,550 Kb |
Instagram API | 2,605 Kb |
Sorting into teams with Fireworks | 5,354 Kb |
To Do List | 1,982 Kb |
Digital Clock | 2,037 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Simple jQuery Slider | Jurbank | 2,874 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Three js | Paulq | 2,353 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Test | Dviate | 2,668 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!