Instructor: This is the last lecture
about removing an element from our application,
and all we have left to do is to actually remove
the item from the user interface.
And so in this lecture, we're going to learn
some more DOM manipulation, and more specifically,
how to remove an element from the DOM.
And so in order to remove something from
the user interface, we create the brand new method
here in our UI controller.
So here we have addListItem, and so after that,
I'm going to put deleteListItem.
So a function, once again.
And what do we need to know in order
to be able to remove an element from the DOM?
That's right, we need a class name or an ID name
so that we can first select it and then remove it.
And in this case, of course we're going to use an ID,
because we've been talking about that all the time.
So let's say selectorID, right, and the ID
that we're going to pass into this
will be, of course, this entire ID here.
So the one that we write from the DOM in the first place.
So we don't want just the type or that ID,
but we want the entire ID that we write.
So for example, the income zero or the income one, right.
So that we can then go ahead and delete this item, right.
So for example, this item, or this item,
this is what we want to delete.
And so let's do that in our method.
And removing something from the DOM
is actually pretty simple, because for that,
we have to remove child method.
Okay, and since it's the remove child method,
we first need to know the parent, right?
So basically we have to move up in the DOM
so that we can then remove the child.
So this is a bit strange, but in JavaScript
we cannot simply delete an element,
we can only delete a child.
So remove a child.
So we start by selecting the element, as always.
So document-dot, and now since we have an ID here,
I will use getElementById, we haven't used that
in a long time, right?
So getElementById, and then selectorID.
So this is our item that we want to remove.
But remember, we can only remove a child,
so we first need to move up, and we already did that before,
and we do that using the parentNode property.
So parentNode, and now we can say from here,
we want to remove a child,
and then, we need to again select it.
So really, this is a bit strange, as I was saying,
but it's just how it works.
So we need to pass this into here again.
So this is how it works.
Now I would suggest to not do it this way,
but to first actually save the selection here
in a separate variable, right?
So let's say element is this, okay?
And so then we say,
element, then we want the parentNode from that element,
and then we remove the child, which is this element.
So pretty weird, but yeah, that's how it works.
There's actually an excellent reference that I found
where lots of these things are explained,
so lots of DOM manipulations like this.
So let's take a look at that, I already have it here,
and you can also find it on my resource page, as always.
And here we have a comparison between jQuery
and JavaScript DOM API.
So this is for, now let's see, removing elements here,
so this is what we did here, right?
So we selected an element, then set parentNode,
and removeChild, and the element again, right?
But here is a lot of different stuff that we can do,
and some of that we already did.
For example, let's see, so creating,
and inserting elements before and after, here's what
we did here, so insertAdjacentHTML,
and we already used, I don't know if it was the after end,
but it was something like this, okay?
And so, in here, you can find something for your needs
if you want to do some DOM manipulation
like inserting or removing elements from the DOM.
Okay, so our deleteListItem method is actually complete
with this, so this is a pretty simple one
because all we really wanted to do here
is to just remove this element.
So let's now call it.
So in here, so UI controller, dot-deleteListItem, alright,
and now remember, we have to pass in the ID,
and it's the itemID, as we were talking about
right in the beginning.
Alright, and now, all we have left to do
is to update and show the new budget.
But that's really simple, right,
because we already have this code.
So let's go here to our control AddItem function,
so this one.
So when we coded this part of the application,
we already had this function here,
which does exactly what we want.
So let's just copy this, and paste it here.
Alright, and that's why back then, I said
that we should create a function to update the budget
because we were going to use it again,
and now is that time.
So instead of writing the same code, here in this function
and in this function, we created an updateBudget function,
which contains all of the stuff that we do here.
So let's remember, what is this?
So we calculate the budget, then we get the budget,
so we basically read it from the budget controller,
and then we display it on the user interface
with the UI Controller.
Okay, so let's check this out.
So I'm refreshing it, and then
let's say salary, 1500, or something like this, okay,
and sold car, 2000.
And let's remove it, and it's gone.
So it's working, so really cool.
And did you see that also, this budget here was updated,
so not only was the element actually removed,
but also the budget was updated.
So let's remove this one as well,
and so we're back to zero.
So let's add an expense, holiday, 500,
and now add on our income, like logo design
for 2500 dollars, so a great (mumbles), right?
And our salary again.
So all of this has updated, of course,
and now I'm removing this one, and yeah,
again it updated, it updated here,
and so everything works perfectly.
That's only just, look at our budget again,
and take it, this is also empty,
and yeah, it is, so, perfect.
And with this, we concluded the part two of the project,
which was just to delete an item here from our application.
And we did that perfectly.
So our app is growing and growing,
and it's getting better and better.
So let's now move on to see what's next.