So then we've seen how to attach event listeners to our different items inside this little to do list
and then react to those events.
Now I'd like to show you how to delete an element from the Dom, because ultimately when we click on
one of these, I want to delete it from the web page, but I also want to show you how to add new elements
to the web page as well.
So first of all, how do we delete something from a web page or from the Dom?
Now I'm going to show you a little example.
First of all, by selecting this Ul and then just deleting that.
So let me grab that at the top of this file.
I'm going to say const Ul is equal to documents, dot query selector and pass in the Ul for our selector.
So now we have a reference to that.
Now if I at any point want to remove this from the Dom, then I can just say Ul and then oops, not
ul dot remove.
And that is a method.
So this takes the element and it takes it out of the web page.
So if I save it now and come over here, we're going to see that completely vanish because it's taken
it out of the web page completely.
It's nowhere to be seen.
So that's very simple.
That's how we remove something from the Dom.
So what we could do is take what we've just learned here and apply it to this thing.
Because when we click on one of these items, I want to delete it.
So instead of this over here, we could comment this out and underneath we could say e dot, target,
dot remove.
And that is going to get the li tag that we click via E dot target and then use the remove method on
it to take it out of the Dom.
So let me save that and click on one of these.
And now we can see when I click on one, it takes it away.
Awesome.
If I refresh, they all reappear because we're just refreshing the HTML page which has all of them inside
it.
So then that's how to remove something.
Now I want to show you how to add something to a web page as well.
Now we've already seen things like inner HTML to add content inside a particular element, but I want
to show you a different way.
So imagine now we want to click on this button and then add something new every time we click on that
button.
Well, then what we'll do is first of all, attach an event listener to that button.
So let me first grab the button by saying const button is equal to document dot query selector and getting
the button.
And what I'll do underneath is say button, dot, add event listener, and we want to add a click event
to that button and we'll have a callback function which fires when we click that button.
Now we don't need to take in the event parameter like we do down here because we're not going to use
it inside this event.
Listener So let me first of all change the text on this to something like add new to do.
Okay.
So we know when we click on that button, we're going to add something new to this list.
Okay.
So what we could do right here is something that we've actually learned in the past, and that is to
take this Ul over here, use the inner HTML and then just append to that.
We could say plus equals and then some kind of new string, which is going to be an li tag and something
new like this.
So close off that li tag.
And then when we click on this button, it's going to append to the Ul in the HTML, this element.
So we've seen this kind of behavior in the past.
And if I just clear that error and try to add a new Todo, okay, we get assignment to constant variable.
So let me save this.
That's why it's not working.
And then if we try to add new to do, we can see something new and we get these new li tags.
So this works.
However, I want to show you a different way to do this.
So what we could also do is say, now we're going to create a new element, which is an li tag.
So I'm going to store this inside a constant called Li, and I'm going to set it equal to document dot
create element.
So this is a method on the document object that we can use to create a new HTML element.
Now inside we take an argument which is the element that we want to create.
Well, we want to create an li tag so we pass in Li.
But if we wanted to create a P tag, we'd say P div div et cetera.
So we're creating a new li tag.
So now we have that created in JavaScript just sitting around not doing anything.
We've not actually inserted it into the web page, so we just have a reference to it Now before we actually
do insert it into the web page, I'm going to set the text content of this tag because at the minute
it's just going to be an empty tag with no text inside it.
So to do that, I'll get the reference I just created then use text content.
So much like when we get an element from the Dom using query selector.
And we can say ul dot text content or in HTML, we can do the same thing.
When we create an element like this, we have a reference to it and we can set the text content or the
inner HTML.
So what I'm going to do is set the text content to something new to do, and then we have this.
But what we need to do is actually insert it into the web page, insert it into the Dom.
Now, there's a couple of different ways we can do this.
The first way is to append it to the parent, and the second way is to prepend it to the parent.
And there is a difference.
So let me show you those.
First of all, I'm going to take the Ul, which is the parent.
This is where we want to insert it into.
And I'm going to use a method called append and I'm going to pass in the li.
Now, if I save this and come over here and click this, then we can see it, appends it to the bottom
over here.
Now that's absolutely fine.
This method will take this tag right here and it will put it at the bottom of the parent.
That is what the Append method does.
Now, when we add something new, if we want it to go to the top instead of append, we can use a different
method.
We can take the parent Ul and use prepend instead and this will take the element we pass inside, which
is this li and it will prepend it to the top of the parent.
So if we click on this now, it goes to the top up here.
So there we go.
That's an alternative way to Innerhtml to add some content to the Dom.
So for those people that don't like using templates and adding classes in templates and all that kind
of stuff, this would be a way to do that because first of all, we can create the element in JavaScript,
then we can do things with the element like set the text content, set the classes or the styles, and
then finally when we're done, we can either append or prepend it to an element in the Dom.
So now we've seen how we can delete things from this.
If I refresh, we can delete things and also add things.
But watch this.
If I add some new to do's, then try to click on them then it doesn't work.
So what's happening?
When we still click on these?
It still works, but the new ones, it doesn't work.
And that's because we already attached the events at the start before we added the new Li's.
So once we add the new allies, we're not attaching an event listener to them.
We only attach event listeners to the initial tags.
So I'm going to show you how we can combat this using event delegation in the next video.
