HTML Academy
How the “change” event works
Working with DOM4/23
Back to the list of tasks
  • 1. What are you planning to do?
  • 2. The “change” event
  • 3. How the “change” event works
  • 4. Deleting the element from the list
  • 5. How to check the collection length
  • 6. Debugging the code
  • 7. Static and live collections
  • 8. Displaying the message on the page
  • 9. The “submit” event
  • 10. Cancelling the form submission
  • 11. How to obtain text from the input field
  • 12. Templates and the <template> tag
  • 13. The contents of the <template> tag, document-fragment
  • 14. Cloning and inserting elements, part 1
  • 15. Cloning and inserting elements, part 2
  • 16. Cloning and inserting elements, part 3
  • 17. Cloning and inserting elements, part 4
  • 18. How to clone elements
  • 19. Adding a new element to a list
  • 20. Deleting a new task in the list
  • 21. Clearing the input field
  • 22. Summary of “Actions with DOM”
  • 23. The third program: “Instant messenger”
How to check the collection length
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Deleting the element from the list

The event is triggered. It is time to change the console output to remove the completed task.

There are various ways of removing elements from the page, of which one of the simplest is calling the remove method on the element that needs to be removed.

element.remove();

The method in the example above removes the element from DOM.

By the way, why did we use this function in particular and not add a handler to the element directly inside the loop? It all has to do with the scopes. We already discussed closures when we created the gallery in this chapter using events. If we placed the handler inside the loop, our program would not work correctly, because only the last element in the collection of elements would be deleted. If you forget why this behavior can happen, you can refresh your knowledge by first reviewing this assignment and then this one.

Use the remove method to remove the completed task in our app.

Comments

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The To-Do List</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1 class="visually-hidden">The To-Do List</h1> <ul class="todo-list"> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Feed the cat</span> </label> </li> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Leave the country</span> </label> </li> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Go for a run</span> </label> </li> </ul> <p class="empty-tasks hidden">All of the tasks have been completed. There are no new tasks.</p> <form class="add-form" action="https://echo.htmlacademy.ru/courses" method="post"> <input class="add-form-input" type="text" aria-label="Task description" placeholder="For example, buy an elephant" required> <button class="add-form-button" type="submit">Add new task</button> </form> <template id="task-template"> <li class="todo-list-item"> <label> <input type="checkbox" class="todo-list-input"> <span></span> </label> </li> </template> <script src="script.js"></script> </body> </html>
CSS
@font-face { font-weight: 400; font-family: "Muller"; font-style: normal; font-display: swap; src: url("fonts/Muller.woff") format("woff"); } body { margin: 40px 32px; font-size: 18px; line-height: normal; font-family: "Muller", sans-serif; } .visually-hidden, .todo-list-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); clip-path: inset(100%); } .hidden { display: none; } .todo-list { margin: 0; padding: 0; list-style: none; } .todo-list-item { margin-bottom: 12px; } .todo-list-item label { display: block; padding: 12px 18px; background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); cursor: pointer; user-select: none; } .todo-list-item span { display: flex; align-items: center; } .todo-list-input + span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 16px; background-color: #ffffff; border: 2px solid #69b253; border-radius: 4px; } .todo-list-input:checked + span::before { background-color: #69b253; background-image: url("check-white.svg"); background-repeat: no-repeat; background-position: center; } .todo-list-input:not(:checked):hover + span::before, .todo-list-input:not(:checked):focus + span::before { background-color: rgba(105, 178, 83, 0.2); } .empty-tasks { color: #69b253; } .empty-tasks::before { content: ""; width: 14px; height: 13px; margin-right: 13px; background-image: url("check-green.svg"); background-repeat: no-repeat; background-position: center; } .add-form { display: flex; } .add-form-input { flex-grow: 1; box-sizing: border-box; height: 46px; margin-right: 16px; padding: 12px; font: inherit; border: 1px solid #a1b5c4; border-radius: 4px; } .add-form-input:focus { border: 1px solid #69b253; outline: none; } .add-form-input:hover { box-shadow: 0 0 6px rgba(105, 178, 83, 0.6); } .add-form-input::placeholder { color: #a1b5c4; } .add-form-button { flex-shrink: 0; padding: 12px; font: inherit; color: #ffffff; background-color: #69b253; border: none; border-radius: 4px; user-select: none; touch-action: manipulation; } .add-form-button:hover, .add-form-button:focus { background-color: #5aa045; outline: none; } .add-form-button:active { background-color: #42862e; }
JavaScript
var list = document.querySelector('.todo-list'); var items = list.querySelectorAll('.todo-list-item'); var addCheckHandler = function (item) { var checkbox = item.querySelector('.todo-list-input'); checkbox.addEventListener('change', function () { console.log('Goal achieved!'); }); }; for (var i = 0; i < items.length; i++) { addCheckHandler(items[i]); }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Click inside the mini browser to put the focus in this window.

100%
Console
Goalscompleted
0
    1. Inside the addCheckHandler function, change the console output to delete the item: item.remove() element.
    2. Click any target in the mini-browser.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.