CODEWITHSUNDEEP
jquery
Prashant
Prashant

Reputation: 5461

jquery remove direct child element

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.

Upvotes: 26

Views: 96675

Answers (3)

psoares
psoares

Reputation: 4883

why don't you try:

$("#remove_me").remove()

don't know if it's wrong, I'm still learning :P

Upvotes: 8

mVChr
mVChr

Reputation: 50177

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();

Upvotes: 10

user113716
user113716

Reputation: 322452

$("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.

Upvotes: 51

Related Questions