CODEWITHSUNDEEP
javascriptjquery
user3522776
user3522776

Reputation: 15

nth-child doesn't work in my case

<dd>
    <br>
    <br>
</dd>

how to remove above <br> ? I tried

$('dd:nth-child(1)', 'dd:nth-child(2)').remove();

as you can see the
is still there: http://jsfiddle.net/h12qo3oe/2/

Upvotes: 0

Views: 115

Answers (7)

Mritunjay
Mritunjay

Reputation: 25892

If you want to remove both br, This will work here

$('dd br:nth-child(1), dd br:nth-child(2)').remove();

There were two problems in your code.

1) You were giving two selectors as two parameters in $. So wrapping them in quotes '' makes a single parameter.

2) $('dd:nth-child(1)' will select first dd so you should say $('dd br:nth-child(1)'

DEMO

Upvotes: 0

PeterKA
PeterKA

Reputation: 24648

You're trying to remove the br's; the first and second children of dd. You want the psuedo selector :nth-child to apply to br not dd; br's are the children.

Secondly, as @Morklympious has clearly explained, the second argument in $('sel', 'context') is the context of your search:

$('dd > br').filter(':nth-child(1),:nth-child(2)').remove(); //removes first two children br of dd

$('dd > br:lt(2)').remove(); //same

$('dd > br').remove(); // removes all br children of dd

Upvotes: 0

ziotob
ziotob

Reputation: 71

Firstly I suggest you to use the correct jQuery multi elements selector: 

$("element1, element2")

In your case you just need to think at the "nth-child" as a selector in an array (arr[x]). In your code you're just selecting the second dd element in your document. For removing only the first "br" tag I would proceed as following:

$("dd br:nth-child(1)").remove();

Or, better, following the latest jQuery suggestion about navigating the DOM:

$("dd").find("br").get(0).remove();

Hope it helped!

Upvotes: 0

Morklympious
Morklympious

Reputation: 1095

What you're currently doing with your jQuery selector is actually specifying a namespace/context for selecting an element. $('selector', 'place-to-look').

You're telling jQuery to look for selector as a child of the context element place-to-look, which, in this case, you're looking for a <dd> located under another <dd> that's second in the outer list.

... which doesn't exist! (Oh no!)

I'm sure others will give you the answer of 'syntax error', but I thought you might like to know what you're doing as opposed to selecting in the same set of quotes like so: $('dd:nth-child(1), dd:nth-child(2)').

Upvotes: 2

wolfd
wolfd

Reputation: 127

Just to expand on what people are saying:

The reason your query isn't working is because jQuery's multiple selector only takes a single parameter. It's a simple fix, just change

$('dd:nth-child(1)', 'dd:nth-child(2)').remove();

to

$('dd:nth-child(1), dd:nth-child(2)').remove();

Upvotes: 0

Salman
Salman

Reputation: 9447

jQuery accepts second argument as context, so in your statement dd:nth-child(2) is considered as context and dd:nth-child(1) is searched in that context.

If you're trying to remove brs. For that you can use this

$('dd').find('br').remove();

Upvotes: 1

Amin Jafari
Amin Jafari

Reputation: 7207

you can also do it this way: DEMO

$('dd').children('br').remove();

Upvotes: 0

Related Questions