by
Lessons:12Length:1.4 hours
Practice javascript and learn dom manipulation 400x277
  • Overview
  • Transcript

3.3 Removing Items

In this lesson, we will write the functionality for removing items from the list.

3.3 Removing Items

In this lesson, we're going to add the functionality for removing an item from the list. And we're going to start by adding a button over on the right hand side. So this second column is going to be where we have all of our controls, either for removing, or reordering, or for adding, like we have here. So we are going to need to modify this markup but it's going to be very simple, we're going to add two rows, so let's add a div with the class of row. Inside of this row, we're going to have just a column, and this is one of those dynamic columns. So it will be as big as we need, and we need two of these rows. The second row is going to have our form for adding an item, so let's go ahead and put that inside of there. And then we will add a button in the top row for deleting. And let's use the text delete. Now as far as the onclick handler here, let's call deleteItem. And we will of course write that function. So let's add that function. And removing an item is very simple. And we actually have two ways of doing it. One is for modern browsers, so that would be the browsers that just about everybody uses today, at least as far as consumers are concerned. Then there's another way that we can do it for legacy browsers. And by that, I basically mean Internet Explorer. Now, you might not think that you need to worry about Internet Explorer, and most of the time, I would say no that you wouldn't. However, if you do end up doing this professionally, and you work on a legacy application that has to work in the Internet Explorer, then it would be useful to have that information. So, you're going to learn how to remove an item both in modern browsers and in Internet Explorer. So the first thing we need to do is get the activated item. We already have the code for doing this but let's practice writing this code because, well practice doesn't make perfect. There is no such thing as perfect code, there's good code, there's mediocre code, there's bad code. I've written all three. I would consider myself more mediocre than anything else but especially when I first started out, I would beat myself up because I would think this code is horrible. People that do this for a living must write beautiful code, and this is mine. But when I actually saw what professional programmers write, I felt pretty good. So, don't worry about the code that you write. The whole idea behind practicing is to get better at something. So, here we go. So we have retrieved our active item. Now we want to remove it, we'll call the remove method. This is the method that is for modern browsers. So, let me put a comment out here. So, Chrome, Firefox, Edge, all modern browsers support the remove method. So if we go to the browser and that's pretty scrunched up, so we'll add some style here, we can delete and you can see that, that item deleted, but we're going to run into an issue, but let's first of all add some styles. So for this first row, I'm going to add some padding to the bottom. Let's see what 50 pixels is going to do. That might be too much. No, I think that's fine. Okay, so we can remove that item but notice that if we try to click on the second item, we get an error and it says that it cannot read property classList of null. And that is inside of the deactivate function. So, let's look at that. So inside of deactivate, we retrieve the active item, and then we remove the active class. Now, our problem is that by removing the active item, there is no active item in the document because we have removed it. So, there is nothing that is being assigned to activate it. Well, actually there is, but the document is not able to find an element that matches the selector, so it's going to return null. And so, there is no class list property on a null object. So, we need to make sure that we have something to work with, otherwise, our code isn't going to work just like it's currently not. So if we don't have an element to activate. We can simply return. We don't need to do anything else because this deactivate function is called inside of our click event handler for RLI elements, we deactivate the item. And then we activate whichever one that we clicked on. So by simply returning inside of deactivate, we move onto the next thing, which is to activate whichever one we clicked on. So now, if we click on Delete, we can click on the second item, and delete, we can add an item and delete that as well. So, we now have the capability for deleting an item. But let's look at the code for deleting an item for Internet Explorer, it's really not all that different, it's just a little bit more typing. Now if we look at the code for appending a child. Whenever we create an li elements, we append that child to our ul element. Well, removing a child is very similar. We just have to go from our activated item to the parent, which is the ul element, so that we could call a method called remove child and we navigate to the parent with this property called parentNode. So this activated element object is our li element. The parent node is the ul element. And the we call removeChild and we pass in the child element that we want to remove. And there we go, that will remove the element as well. And just to prove it, let's comment out our old code, let's click delete, and we still have that same functionality. But we want to use the more modern approach, and let's comment out the legacy. But I'm going to mark this as legacy, just so that it is in the code download, in case if you ever have to support Internet Explorer. I hope that you don't but you might have to. Okay, so, now that we can delete an item, there's one thing that I want to focus on. And that is usability. Notice that whenever we delete an item, we have to reselect another item. And really, that's not that big of a deal. But wouldn't it be cool if whenever we removed an item, it would automatically select an item in the list. Well, we can write that functionality and we will do that in the next lesson.

Back to the top