jQuery: add and remove DOM elements - Beau teaches JavaScript

In this video, I will talk about how to add and remove elements in jQuery. If you need help adding jQuery to your project, check out my getting started with jQuery video. So, the append and prepend methods add new elements as child elements to the target, and the after and before methods add new elements as sibling elements. So, right now, I just have this code up here, and I do have some styling down here. And one thing I do have some styling for a child element and a sibling element, so it's more obvious what where the child and sibling elements are. So, let's add some jQuery here. So, first I'm going to select the target and then do append. Okay, you can see I appended a div with the class of child, and it just says append inside. So, I'm going to run that and see what happens. Remember, append and prepend add elements as child elements to the target. So, that just means it's going to be inside the target, and it's going to be a child inside the target. And so, I'll show you the same thing with prepend. Just going to copy and paste this. And if we run that, we can see prepend is inside the target. So, now we're going to do before and after. And as you can see, you can chain these methods together pretty easily. I'm going to do before, but now I'm going to do the class as sibling, and we'll put before. Run that. And now it's going to be before the item. And then after is pretty much just like that. You can also add more than one element at a time. So, if I just go up to the append, I'm going to do a comma, and I'm going to add another element. This time, I'm going to add a paragraph element. So, we appended this child div, and then we appended another paragraph down here. And you can also append, prepend, do before and after to many things at once. So, for instance, I can select all the paragraph tags. And if I run that, you can see the word lots was appended to the end of each paragraph tag, and it's in bold. And to remove elements and content, there mainly two jQuery methods. We have remove, which removes the selected element and its child elements, and empty, which removes the child elements from the selected element. So, let me show you some examples of that. So, here I'm selecting the target, and I'm calling the remove method. If I just run that, the entire target is going to be gone. Now, we just have the before and after divs that we added before. However, if we move this remove and put it above when we appended and prepended things, uh now it's not going to be able to append and prepend things. So, so now it's not going to show the before and after because there's no target to add things before and after. Okay, let's move that back down. We can also remove all the paragraph tags. So, now we just have the child and sibling divs left. And then the other thing was empty. We're going to go back to selecting the target, and I'm going to run the empty method. So, now the target div is still there, but everything inside the target div is gone. I'm going to show you one final thing with the remove method. We're going to go back to selecting all the paragraphs, remove, and now I can enter a parameter to filter what's being removed. So, if I add a class to this paragraph tag. Now, I can actually remove it based on that class. So, now, instead of it removing all the paragraphs, I'm just going to remove the paragraph that has the filter class. So, if I run that, you can see the filter this paragraph was this div is a target for all sorts of things and it's not in here anymore. Okay, well, thanks for watching. My name is Beau Carnes. Don't forget to subscribe and remember, use your code for good.