4.4 Deleting Quizzes

To this point we've been doing a lot of adding. We've been adding quizzes. We've been adding terms and definitions. But now we wanna go to the other direction. And the final thing that I kinda wanna leave you with is let's say that we are done with a particular chapter or done with a particular quiz. And we don't wanna have it laying around forever because it just starts to clutter up our user interface, so we wanna be able to delete it when we're all done with it. So how do we wanna go about doing that? Well to this point, I would like to add a button to our quizzes here. And down in this extra content section I think would be a good place for it. We've floated over to the left the number of cards within that quiz. And let's float over to the right maybe a delete button or some sort of trashcan icon, that when the user clicks on it, I wanna have something kind of elegant. I wanna have that particular quiz fade away, and then remove it from our collection of quizzes. So that seems fairly simplistic, but like most other things, there are a couple little gotchas along the way. So let's go ahead and take a look at how we can do this. Let's begin in the quiz component. And like I said before, the first thing that we wanna do is we wanna add that delete button, that trashcan icon, in our extra content. So here we are in that extra content div. So underneath our span that has our left floated sticky note that's representing the number of cards we have, let's add another span. Now within here, within the span, we're gonna give it a class. Now remember, this is left floated on the other side. On this side, I wanna say right floated. And right floated down here, I want to add an icon. And this icon is gonna have a class of a trash icon. So let's go ahead and save that. We'll come over here, and there is our little trash can. Now if I click on it, or tap it, or whatever, nothing is gonna happen because there's nothing wired up to it yet. So let's go ahead and start to handle that. Now if I were to tap or click on this right floated trash icon, I wanna handle the v-on:click event just like we've done before. And in this case, I want to delete a quiz. And I want to delete the specified quiz that we're looking at currently just like we were handling for the viewQuiz function up above. So let's come down below, and we're going to basically do the same thing that we did in here. But for deleteQuiz, I am going to pass in the quiz. I am going to do the same type of admit going on here. But the only difference here is I am going to instead of view-quiz, I want to delete-quiz. So let's go ahead and save that. So now we're admitting a new event from our child quiz component up to our parent, which once again is going to be QuizList. So if we come down here and take a look inside of our quiz element here all the way over to the right, we have this viewQuiz event that we're watching for. Well, we can also add another one. So you can add as many of these on here as you need to. So we're going to listen for the delete-quiz event. And when we get it, we are going to call the deleteQuiz function. So let's go ahead and add that in down here. So we are going to come down to the bottom, and let's add in the deleteQuiz function. And this is going to take in a quiz. Now the interesting thing here that I said before, sure we could just go ahead and find the appropriate quiz with that ID, and just go ahead and delete it, and just have it disappear, but that seems a little harsh. I would like to find that particular quiz that we're looking to delete in our user interface, have it fade out, and then go ahead and remove it. So it's kind of a little bit more aesthetically pleasing interaction for the user. But the interesting thing we have now is that we are actually only seeing one quiz element right now in development. Because we're doing this for loop on it and we're looping through all the quizzes that are active. So how can we really know which one is the one we want to get a hold of and remove from the user interface? Well, the only way to do that is to uniquely identify each one as it is created. And we know that we can do that in HTML using the id element. Now the id element is an interesting one. And all of the built-in HTML elements are kind of complicated for us to be able to really tweak and use Vue.js on. We can't just use them straight because we can't use string interpolation. We can't do those types of things within attributes on elements. So we're gonna once again use our friend v-bind. And we're gonna v-bind to id, and we're going to use double quotes. It's important for you to use double quotes right here cuz we're gonna have to use a little bit of a trick. And because we wanna use some Vue.js, we wanna use this quiz in here and get its id. But we don't wanna just leave the id as that number. Let's be a little bit more specific about what this is. We're gonna say, in single quotes now, quiz_ and then we're going to append on to that quiz.id. So each one of these quizzes is gonna have a unique identifier that's going to be quiz_ and then whatever that id is of that specific instance. So let's go ahead and save that. Now if we come back down to our deleteQuiz, now we have the opportunity to not only uniquely identify which quiz we're talking about in our quizzes collection. But we can also find the unique quiz element in the UI, fade it out, and then delete that quiz. So it's kind of a nice, natural fade out and delete sequence. Now the interesting thing here is that we've been talking about different ways to handle these operations in Vue.js, but don't forget about your friend jQuery. If you're just getting into Vue.js and you're having a hard time maybe, or you're looking to transition from straight JavaScript or jQuery, you can intermingle the two, that's okay. And I'm gonna show you here that I can use some jQuery to effectively fade out the user interface, but then still use Vue.js to remove the appropriate quiz. So I'm gonna drop a little bit of code in here and then let's have a look at it. So in our deleteQuiz function here, we are going to start by creating two constants here. QuizId for the id of the quiz that we want to delete, and parent which is going to be the scope outside of our jQuery. Now remember, when using jQuery, once you use a selector, once you get inside of that selector, everything that you referred to as this is going to be within the scope of that selected or those selected items in jQuery. But on the outside this is always referring to kind of the scope that's referred to as part of our Vue.js component. So in order for you to refer to things that are in your Vue.js component with inside a selector of jQuery is you have to get those end constants or variables outside of that selection in jQuery, and then refer to them on the inside. So that's why I'm grabbing quizId, as well as parent. Because parent is really going to be this, so that I can refer to any of my items out here like quizzes or selectedQuiz, or viewState, or anything like that. So now that I have those, I can use some jQuery and I can say give me the element that has an id of quiz_ quizId. And then I want to fade that out. I wanna use the fade out function in jQuery, and I want to do that slowly. And then once that has completed, I want to execute this function which is going to get the appropriate quizIndex with inside parent.quizzes. I'm gonna look for the index of my quiz. And then I am going to splice that particular index from quizzes by one position. So let's go ahead and save all of that. So now if I come back into my application, let's go ahead and refresh this. So here I can take a look at everything we have going on. And let's say I'm done with Chapter 1, and I wanna get rid of that. If I come over to the right-hand side and click this, you see it's gonna fade out, and then it's going to disappear. But now I could still come back in here and take a look at Chapter 2. There's nothing in there. We could add another one in here. Let's say maybe I wanna add Chapter 1 back in. Let's go ahead and save that. Then I could come in here obviously, and I could add in some terms and what have you. And maybe that was a mistake. I didn't really want to do that. So I could go ahead and delete that one, and it will delete everything. So there you go. Now you have the ability to delete some of these quizzes, as well as add them. And I've now also shown you some tips and tricks on how you can incorporate standard jQuery within your Vue.js applications to provide more of a natural user interface or user experience for your end users.