Remove Elements using Jquery Methods

Hello guys! Welcome to our jQuery series. In the last segment we saw that through jQuery how can we dynamically add elements in dom.

Our today’s segment is exactly opposite of the last segment. You can say that as in the last segment we learnt how to add elements so exactly opposite that is how to remove elements that we will learn today.

Meaning we did addition in the last segment that is one by one elements were added.

We took an example of the hotel menu in the last segment when the bill was to be generated whichever items the customer selects that will be added in the bill.

So, if items in the bill are added and somehow let’s say the items added in the bill may be wrongly added and we have to remove or delete it then in that case what we should use.

Today’s segment will make us understand that items which are already added and have to be deleted so how will we do that.

We can do that by removing elements.

Related to remove there are a total three elements in jQuery remove, empty and detach.

One by one we will see all the methods today.

The first is the remove method.

What is the use of the remove method? As written here “The jQuery remove method is used to remove the selected elements out of the dom.”

Meaning that whatever element we have selected or given through code all those elements will be removed by remove method from dom.

Second thing “It removes the selected element itself as well as everything inside it including all text and child nodes.”

What does child node mean? It means that let’s say I take a div and in that I take three P tags which will be the child of that div and that div is parent.

Here comes the parent child relationship in the picture.

If I remove div then all my child nodes meaning all the child elements generated will be removed.

What does remove do? Remove will remove parent, child as well as whatever content/text is there taken in parent or through selector.

Next, “This method also removes the data and the events of selected elements.”

Means if I take any button and bind click event with it and I remove button so what will happen my button will be removed but along with it all the click events I wrote or relevant events will also be removed.

Means what remove method does is whichever things are attached meaning any event or parent child parent won’t be removed remember this if I remove any element then its child will be removed and not parent.

The child, its text, its events and items ETC will be removed.

This will happen with the remove method.

Here you can see the syntax which will work.

So, you can see that selector is given after that remove method is given and after that selector is there which is optional meaning if we have a sub selector that is from so and so selector this selector is also to be removed then you can pass.

This is optional. If you don’t give this then the selector passed will remove elements.

Will move to an example now so that we can understand it properly.

(04/19)

Here, in the button click event one p tag is removed. It’s a very simple program which we will do through sublime text….

This is our sublime text…. Html… here , example. The example we are doing is remove so example remove.

We’ll add our script. Here comes our jQuery shift.

Now this is our script where I’ll write my jQuery code and this is my style.

In style we basically add one thing: body… text align center.

This is my script and here we will write h one… in h one we will remove the method.

So,” example to …remove elements…. using remove”. Okay? Save.( 6 seconds pause,typing)

This is our program. We will run it.(4 seconds pause,typing)

So here is an example to remove elements using remove okay so basically what we do always we’ll take a button.

Through that we’ll remove the p tag. Here comes my button whose id will be BTN. Here click. …This is my p tag….

“This statement is going to be removed okay”. So, if I reload this.

You can see the click button and the statement which is removed. But we haven’t bound any event.

SO now we will write our jQuery portion.

First is the dollar… document dot ready function and here will come my dollar my button id that is B T N this is id so hashtag dot… click and my function…

So, on clicking the button I have to do something. Basically, first of all we’ll perform simple removal.

I want to remove this p when I click this button then my p should be removed. Clear?

This is my save and reload.

As soon as I clicked you can see my p got removed. I’ll reload this and inspect the p tag. You can see this statement is going to be removed meaning it is still here.

Now I’ll click this and you can see that from here also my p tag and from here too my p tag is removed.

Let’s say if I copy this p three times and now, I’ll try to remove the statements. So, let me click the button.

As soon as I did button all my p tags were removed.

We saw a statement that if we remove our parents then the child will also be removed. So, let’s do one thing: we'll cut this p and take one div we’ll take class and give id parent. This is my child p.

So, what is happening here is that the div becomes my parent and inside that my three child elements are there three p tags.

I’ll save and reload. The output I can see is the same.

You can see three p tags where the three p tag above this there is one div inside which my p is there.

So, my div is the parent div whom I have given id. If I remove this id.

Hashtag parent.. dot remove… So you can see my div is removed but along with it all the three p are removed which indicates that our statement if we remove parent div then all the child will also be removed.

And the same thing is happening here. This justifies our statement that if we use the remove method then on removing our parent, the child will also be removed.

These were all our possible things. Here you saw events will be removed, on removing our parent, the child will also be removed and when we remove this not only content is removed whole tag gets removed by remove method.

That is what we covered here.

Similar to the remove method we have another empty method.

What does the empty method do? “The jQuery empty method is used to select all the child nodes and content from the selected elements. This method doesn’t remove the element itself.”

Means if you saw the examples performed on p in that we removed all the p and div too. So, if I remove div parent div then what will happen?

With remove the whole element is removed from dom but if I use empty then what will happen is that my child we be removed and its content but my tag element will always be there.

(10/31)

So empty as per its name what it will do is it will empty the element nothing will be kept inside but element itself tag will be there.

If we perform practical for the same then we can understand this more properly.

Here will come our example empty. And here it is empty. What will happen here is this was the last program… element using empty in this we will do.

Meaning we will keep parent and child as well and on this we will perform empty.

And let’s see what happens. As per theory div should be there and these three things will be removed. Let’s do one thing.

Save this… empty and this is my program.

What will happen in case of empty my program will be there but its content will be removed.

I’ll inspect this div by clicking exactly what we thought.

Our div is there and my contents are removed. Now if inside this div other than p if I write hello random hello. Here you can see my hello and three p tags.

As soon as I click this you can see that my p is removed which is my child element. All my child is removed plus my hello and the text context of my div is removed.

So, what happened basically here is on whichever selector we applied an empty method that empties that selector or element and removes its content also its child but that element will be there in dom.

What will it remove is that element?

So here we can see the difference between empty and remove.

Remove removes our content plus its whole element whereas in case of empty our complete div is their parent is there but child is getting removed.

Now we will move ahead with our slide. We finished our empty program.

Now comes our last method related to removal that is the detach method.

What happens with the detach method? Just like what is written here “The jQuery detach method is used to remove selected elements, including all texts and child nodes and keeps only data and events.”

Means if I apply the detach method on my button then what will happen? My button will be removing its text too but events related to it like on click event ex cetra that will be there.

If I do the same thing with remove and empty it will remove the event too.

If you want that your element meaning the dom created in my web browser and the button p tag visible events inside that should not be removed.

Due to clicking the changes shouldn't happen, only the element is removed. Then you can use detach.

Means to remove elements from dom you can use detach. To keep its effects related to events for that we use detach.

And if you want to remove completely then you can use remove or empty but if you want to keep effect data events then you can use detach.

Compared to those two methods using detach is an advantage for us as the task performed through it will be present there.

Next, “This method saves the copy of the removed elements to reinsert them whenever they are needed later.”

Means if you think that I’m removing this button now but in future I’ll require that button then in that case you use detach because it creates a copy. Events and all that will be there.

So, in that case our ``detach” is more useful.

Two things are given about detach. The difference, which has been just taught the same, is written here that what remove method does is “it is used to remove the elements as well as its data and events.” Correct.

What jQuery does is “removes only the content from selected elements.”

So here we can see the difference between remove and empty. Just like I said for detach events there content will be removed.

Hence this is the detach method and an example of detach.

The program which we did to remove we’ll write it here. Detach, detach

Now I’ll apply detach on this parent first we will see what will happen very basically.

So as soon as I click on this my p is removed and in the elements you can see only the button is left. The parent element was removed. Correct.

(16/08)

Now i'll do one thing in this method only when on this parent meaning on this div is clicked something should happen.

So, let’s say outside this button I’ll write parent click( 5 seconds pause,typing)  body… dot C S S ….background… cyan.

What we are doing is changing the background when clicked on this div. I’ll save… and reload.

I clicked anywhere here that is clicked inside the div then the background color changed. If I click outside, the color will change because the width is hundred percent. Okay?

You can see click doesn’t work here but inside this it is working.

So, this is my clicked event which was performed.

Now what I will do is I’ll use this button. What will happen is the event will go away. That is my text portion. All the “child”are removed.

I’ll first perform the click event and then I’ll click here. You can see click isn’t occurring but if I go to source and check somewhere or console or event then my method you can see here in head.

You can see here that my background related method is there even though my div is removed but related to it whatever jQuery I wrote or event I wrote does exist.

What does this show that whatever parent or div we removed but even after removing the events related to it is still there in script as is it. No difference has happened here.

Only our element below the button you can see our p and div tags are not there now which are removed.

So here you can consider an advantage for the detach method: whatever the events are there are saved so in case if I add parent div all my events will come to effect as it is.

Meaning if I reload this or do whatever then my events will be effective as it is.

Compared to empty and remove what is the difference in detach is that my events will be safe as it is there is no removal of it.

This was our detach course. Now we will go back to our slide.

We saw detach so in today's segment we learnt about the three methods of removal; remove, empty or detach.

Also, we covered the internal difference between all three methods.

So, guys I request practice whatever we learnt today for once and see and practice the code.

The videos and codes will be available in video description.

And whatever we covered in today’s segment addition we performed in last segment removal is performed in today’s segment.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Our next segment is also very important in jQuery html how we wrap existing elements with another element. This is also a dynamic task.

How to use this when we work with applications that we will see in the next segment.

Till then Thank you!