What is the best way to remove the first div inside the parent div using jQuery?

Question

I have the following markup:

<div id="parent"> <div id="divToRemove"> </div> </div> 

And I have the following jQuery to remove the first div that works fine:

 $('#parent').find('div').remove(); 

Is this the best way to remove the first component? Or is it more efficient to use a selector? An example will be great!

Pay attention . I know I can use:

 $('#divToRemove').remove(); 

however, I would like to be able to use selectors in this case (reasons beyond the scope of the question).

Thanks OK.

Answer 1

This should be the fastest and safest:

 $('#parent').find('div').first().remove(); 

Answer 2

Do you want to

 $('#parent').find('div:first').remove(); 

or it will delete all the <div> inside the parent <div> .

Answer 3

let's say. you are making a JS event and you have access to "this" I will do it like this.

 $('#child').click(function(){ $(this).closest('div#parent').children('div:first').remove(); }); 

specify that this is not the most efficient way, but useful in an interactive event. alternatively, you can use several selectors:

 //closest,parent,next,prev,find,children and nth-child() 

Answer 4

you can try this. It works great for me

.

$ ('# parent) find (' DIV: first '). Delete ();

Answer 5

 $('#parent').children('div:first').remove(); 

use this if you are only talking about removing the immediate child divs of the parent. and it will be better than .find () when you have more internal divs.

Answer 6

I have one more:

 $('#parent > div:first').remove(); 

">" selects the child elements of the element that are referenced to the left, and, of course, the "first" refers to the first child.