Have you ever created a to-do list or task manager and wondered how to remove a task when it's done? When I first started learning JavaScript, this was one of the things that confused me. But don’t worry — I’ll walk you through it in a super simple way.
This guide is especially for beginners or anyone who has never written a line of code before. I’ll keep it easy, real, and straight to the point.
What Does “Delete a Task Row” Even Mean?
Let’s say you’ve made a list of tasks on a webpage like this:
-
Go to class
-
Do homework
-
Clean the room
-
[Delete Button]
Each task is shown in a row or a line. When I click the delete button next to a task, that row should disappear. That’s exactly what “deleting a task row” means — removing it from the webpage.
Tools You Need
-
A simple text editor (like Notepad, Notepad++ or VS Code) Anyone.
No need to download anything extra.
Simple Example-
Here’s a basic example of an HTML list with tasks and a delete button next to each:
<!DOCTYPE html> <html> <head> <title>My Task List</title> </head> <body> <h2>My Tasks</h2> <table id="taskTable"> <tr> <td>Go to class</td> <td><button onclick="deleteRow(this)">Delete</button></td> </tr> <tr> <td>Do homework</td> <td><button onclick="deleteRow(this)">Delete</button></td> </tr> <tr> <td>Clean the room</td> <td><button onclick="deleteRow(this)">Delete</button></td> </tr> </table> <script> function deleteRow(button) { // Get the row where the button is located var row = button.parentNode.parentNode; // Remove that row from the table row.parentNode.removeChild(row); } </script> </body> </html>How Does This Work?
Let me explain it in simple steps:
In the HTML:
- Each task is inside a
<tr>(which means table row). - Each row has a Delete button that calls a function called
deleteRow(this)when clicked. thisrefers to the button itself — the one that was clicked.
In the JavaScript function:
- We find the row that the button is in using
parentNode.parentNode(basically, go up two steps in the code tree). - Then we remove that row from the table using
removeChild().
Why This Is Helpful?
This trick helped me make interactive webpages. You can use it in:
- To-do lists
- Shopping carts
- Attendance tables
- Anything where you need to remove stuff without reloading the page
Bonus Tip:
You can also add a form to let users add tasks and include a delete button for each new task. That’s a next-level trick, but once you’re comfortable with this, you can totally do it!
When I first saw JavaScript, it looked super scary. But once I started breaking it down step by step, it got easier. Now, deleting a task row feels like second nature — and I hope after reading this, it will for you too.
Just remember: you don’t need to be a genius to learn code. You just need to take one step at a time. And this — deleting a task row in JavaScript — is a great step forward.
- Each task is inside a
-
Leave a Reply