Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery remove direct child element

Tags:

Using jQuery, how can I remove an anchor tag in my html body which also consists of a wrapper div, and this wrapper div is above the anchor tag that I want to remove.

It is like

<body>     <div id="wrapper">          <a id="not_me" href="#">hi</a>     </div>       <a id="remove_me" href="#">Remove Me</a>  </body> 

If I use

$("body").find("a:first-child").remove(); 

it removes the first anchor tag in my wrapper div i.e. one with id "not_me", while I want "remove_me" to be removed.

like image 552
Prashant Avatar asked Jan 26 '11 14:01

Prashant


People also ask

How to remove all child div in jQuery?

jQuery empty() Method The empty() method removes all child nodes and content from the selected elements. Note: This method does not remove the element itself, or its attributes. Tip: To remove the elements without removing data and events, use the detach() method.

How to remove function in jQuery?

The remove() method removes the selected elements, including all text and child nodes. This method also removes data and events of the selected elements. Tip: To remove the elements without removing data and events, use the detach() method instead.


2 Answers

$("body").children("a:first").remove(); 

You use children()(docs) because you only want to target direct children of body.

Then use "a:first" as the selector to target the first <a> element.

This is because with the first-child-selector(docs) you'll only get the <a> if it is the first child of its parent (which it isn't). But with the first-selector(docs) you get the first <a> that was matched.

Alternative would be to place it all in one selector:

$('body > a:first').remove(); 

Same as above, but uses the > child-selector(docs) instead of the children()(docs) method.

like image 140
user113716 Avatar answered Oct 17 '22 08:10

user113716


You want to use children() to search on direct children only, and you can use :first or eq(0) to remove the first one:

$("body").children("a").eq(0).remove(); 
like image 34
mVChr Avatar answered Oct 17 '22 08:10

mVChr