I reorganized everything and made progress. It felt good to realize that I haven’t completely forgotten everything I learned in my time at Flatiron.
Then, the final challenge. The syntax needed to delete a specific list item from an unordered list based on the ‘click’ event of a button attached (appended) to that specific list item.
Lesson learned: be more specific with google searches.
So, I ended up brushing up on the DOM to understand more on parent and child node relationships.
The Document Object Model is used to basically access the “document” object and modify it.
A pretty abstract concept that you can dive deeper into sometime but, I mainly want to focus on the nodes that make up the “DOM tree”.
Keep in mind that everything between the opening and closing tag in HTML is an ‘element’.
<label for="new-task-description">Task description:</label>
There are 12 types of nodes. Remember, all items in the DOM are nodes.
So far I’ve only worked with element nodes and that is what I’ll be focusing on here.
Element nodes => HTML elements
<h1>An element node</h1>
Fun fact: “the document itself is a ‘document’ node, the root of all other nodes”
This seems to explains the syntax of why most methods so far begin with ‘document’. We’re acting on the base document node to grab, alter and create elements within it.
DOM Tree & Relationships
Because each node is nested within another node we can map them into a tree.
Looking back at my index.html, I can map the element nodes like so:
Think of element nodes as being a parent, child and/or sibling node based on where they are in relation to each other.
Get Element By Id — method
So, when we want to access an element we’ll use the
getElementById() method to grab the whole line.
To avoid repeatedly typing this whole line every time we want to access this element we can set it to a variable.
const theList = document.getElementById("tasks");
Now, anytime I want to interact with this particular element I can just type “theList”.
It’s good practice to do this with every element you grab. Just in case. It also helps to make the code a bit easier to read by breaking it down into shorter lines.
Create Element — method
The syntax for creating a list element (li) and assigning it to a variable looks like:
const newTask = document.createElement('li');
You can follow this syntax for other HTML tags.
Append Child — method
The goal is for new list elements (li) to be created and added to the already established unordered list (ul) in the index.html file.
First, grab the ‘ul’ element so we can attach new ‘li’ elements to it.
const theList = document.getElementById('tasks');
*This will be the parent node.
This is very important. If you create new elements but they have nothing to attach onto they are not going to show up in the browser.
Next, create the ‘li’ element.
const newTask = document.createElement('li');
*This will be the child node.
The syntax for attaching (appending) a child node to a parent node looks like:
There are several types of events that you can read more about here:
An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs…
I mainly use the
EventTarget.addEventListener method. It basically “listens” for an event that happens in the DOM, such as a “click” or “submit”, and will trigger a method(s).
This is where the fun happens!
MDN Web Docs says it “sets up a function that will be called whenever the specified event is delivered to the target. Common targets are Element, Document and Window, but the target may be any object that supports events”.
To reword this, the
EventTarget is the Element, Document or Window on which the
EventListener is called.
A button is the most common element that an
EventListener is added onto.
btn.addEventListener('click', (e) => deleteTask(e));
One interesting thing that can happen here is that the ‘event’ can be passed as an object to functions activated by the
EventTarget.addEventListener method. In the prior example, I have it encompassed in “e” being passed to the deleteTask function (the callback function).
In the deleteTask function, I need to grab the specific list item (li) from an unordered list (ul) based on the ‘click’ event of a button attached (appended) to that specific list item in order to delete it.
addEventListener was called on the
This was the syntax I was looking for to complete the final task for Task Lister Lite. This essentially returns the parent element of the node it is called on.
e.target.parentElement = that very specific ‘li’ element attached to that
EventListener acted on.
Remove Child — method
Pretty similar syntax to the
theListthat represents the ‘ul’ has already been defined and again will be the parentNode.
The ‘li’ I want to delete can be contained in a variable like so:
const selectedTask = e.target.parentElement;
How To Work with the DOM Tree and Nodes | DigitalOcean
The DOM is often referred to as the DOM tree, and consists of a tree of objects called nodes. In the Introduction to…
When extensions are needed, the DOM Standard can be updated accordingly, or a new standard can be written that hooks…
HTML DOM appendChild() Method
Element Object Append an item in a list: Before appending: After appending: Try it Yourself " More "Try it Yourself"…
Introduction to events
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so…
The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is…