7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 36 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Adding and Removing Classes

In this lesson we’re going to add and remove classes from DOM elements using plain JavaScript instead of jQuery.

Useful Links

2.5 Adding and Removing Classes

In our last lesson we created a couple of event listeners for our buttons. We created one for our collapse button, up at the top right and we created one for our headings for the title bars basically in our panels. Now that we've commented out or original JQuery click events you'll notice that our panels are no longer hiding and showing as they should, instead we're just getting this old alert. Well what we wanna do is we wanna take the jQuery that's in our old method, our old event and we want to redo that code in plain JavaScript In our new Event Listener. So let's get rid of our alert here. Actually, before we do that, let's fork this, create a new copy. So you can find the URL for our starting copy here in the course notes for your lesson, and we'll fork that, create a new copy. And we'll get started with this new copy. So let's scroll down, here's our commented out jQuery event listener. And just below that is our loop that contains our event listeners for each individual heading bar. So again, we're gonna get rid of our alert here, and then we'll get started. So there's a couple new items here that we haven't talked about yet. We've got our remove class method, an add class method, and then this parent method, which returns the parent of the item that we're pointing to. So inside our event listener, the first thing we need to do is to remove the active class from all questions, from all panels. And remember, the panels are stored inside this question variable. So we're gonna use another loop. We've gotta loop through all of those questions and then for each question we're gonna remove the active class. We don't really need to check to see if the active class is there, we're just gonna remove it. If it's not there it'll stay the same, if it is there it'll get rid of it. So we're gonna create another for loop inside our existing for loop or inside our event listener that's inside that for loop. And here we need to point to j instead of i, because we're already inside a loop that has a variable of i. So we're gonna set j = 0. And as long as j is less than, and we're pointing to the question array now. And again, this question array is the one that stores all of the panels in it. So as long as j < question.length, don't forget the .length there. Then we're going to increase the value of j by one. So we've created our for loop there, and inside that for loop, we just want to remove the active class from whichever item we're pointing to, whichever question item we're pointing to. So we're gonna point to question. And then inside square brackets we're gonna point to j., and the way we remove a class in jQuery is we just say remove class. And then inside parentheses the name of the class we're removing. Here it's a little bit different. Instead we're gonna point to a property called classList. And that classList is basically an array of class names, and we can add or remove a class name from that. And the way we remove it is we simply type .remove, and then inside parentheses and quotation marks, we type in the name of the class we're removing, which in this case is active. Now keep in mind that this particular method does not work in Internet Explorer nine and older versions of Internet Explorer. So anything after Internet Explorer nine is fine. But if you need to support IE9 and before then there is more that you can do in plain JavaScript to get that to work. Basically instead of just using classList, First you would check to see if classList exists. If it does exist then you can just remove the act of class. Otherwise if it doesn't exist, you'll have to do it a different way. And adding another class is easy enough, it's basically just string manipulation. But removing a class requires a little bit of regular expression code. And that's a little bit beyond the scope of what I wanna cover in this course. So I'm gonna leave that up to you. If you want to make this more compatible with older versions of Internet Explorer. Then I'll just leave that as an assignment for you to go online, and to do some searches and try to figure out how to remove an existing class from an element, using plain JavaScript. But for the purposes of this course, we're just going to use classList.remove, because this works with all modern browsers. Again, inside this event list, whenever we click on one of these headings, we're going to remove the active class from all existing panels. And we see that happening up here in the jQuery code. And then after that, we need to look at the item that we just clicked on, whichever heading we just clicked on. We need to find that item's parent and then add the active class to that parent. So not only are we adding a class, which we haven't done yet. We also need to figure out how we find an item's parent or an element's parent in plain JavaScript. So again all of this is going to come after our for-loop. And remember, we're still inside this event listener for heading I. So we're looking at one particular heading element right now. And so we can point to that particular heading element. And then point to that element's parent using the parent node property. And so the way we do that is we can actually do this one of two ways. We can access the item that we just clicked on, either just by pointing to heading i or we can point to e.target, either way. Will get us where we're going. I'm actually gonna use e.target to make sure this is always triggered based on this specific item that we clicked on. So we're gonna say e.target, which will point to the heading itself, the panel heading class. And then I want to find the parent of that target, the parent of this heading. The parent is gonna be the overall panel that contains both the heading and the body. So the way we get the parent in plain JavaScript is we type .parentNode with a capital N. Once we've got that .parentNode, which again is the panel as a whole, we can then add a class to it. So the way we do that is we type .classList just like we did for remove, make sure that the L in list is capitalized, and then instead of .remove we type .add. We are going to add the active class to that particular item. Once we've removed and added the classes as we need, we are not done yet. We still need to hide and show the right elements. Well, the good news is we've all ready created a method that does that for us. The activateQuestion method is going to look at which item is currently active, and it's going to show that one and hide all of the rest. All we need to do is to call in this activateQuestion method. After we add the active class to the right panel, then we're simply going to call on the activateQuestion method that we created. And that gets rid, as you can see, of the last bit of jQuery code that we needed. So we can get rid of all this commented section here, and then we can go up to our variables and get rid of all of our JavaScript, I'm sorry, our jQuery variables. And we get rid of this console log here and then our final Jquery variable up here. So now we've got 100% pure JavaScript in our Javascript window. No more JQuery at all and the last thing we need to do is to click then make sure that this still works. So I'm gonna save our changes here and then I'm gonna click on each of these items in turn and we see that does still works. And we'll click on collapse all that still works as well. We're back to where we started. We've stripped out all of our jQuery, and now we're working entirely with JavaScript. Thank you for watching, and I'll see you in the next video.

Back to the top