How can I select a div by id that is nested within another div?

Question

Right now I have some html that looks like this once rendered.

<div id="MyPartial">
    <div id="div+1"></div>
    <div id="div+2"></div>
    <div id="div+3"></div>
</div>

All of the div's inside of the MyPartial div are dynamic. so there could be 3, or there could be none. I am trying to remove them one at a time via there ID.

$("#div+" + Id).remove()

this didn't work so i tried this

$("#MyPartial").children().select("#div+" + Id).remove();

This removes the entire 'MyPartial' div.

What am I missing? The first statement has always worked fine for me in the past but it seems like the nesting is messing things up now.

Edit: the plus sign was messing me up. I changed it to an underscore and it works fine. thanks everyone.

Try `$("#div\\+" + Id)`. You're selecting using an ID, so you need the number sign identifier (`#`). — George, Dec 04 '14 at 15:51
Given all IDs on the page should be unique why can't you just do $('#div+' + id)? — Liath, Dec 04 '14 at 15:52
I would avoid '+' char in your id. The char '_' would be better. — Flea777, Dec 04 '14 at 15:54
You might also need to escape the `+` like `$("#div\\+" + Id).remove()`. `+` can be parsed as a CSS selector and will select the next element — Spokey, Dec 04 '14 at 15:55
@MrLister Yes, of course, but for example you'll need to escape it in a selector or a regex. — Flea777, Dec 04 '14 at 15:56
I had a bit of a typo in my initial post. let me see if i can get this to work real quick and get back to you all. thank you — user1977591, Dec 04 '14 at 16:06

score 4 · Accepted Answer · answered Dec 04 '14 at 15:56

4

Don't use a plus (+) sign in your id! It is a selector (see http://api.jquery.com/next-adjacent-Selector/)

If you really want to use a plus in your is, you should escape it (see http://api.jquery.com/category/selectors/)

example:

$('#div\\+1').remove();

answered Dec 04 '14 at 15:56

Elmer

8,198
1
41
34

I was wondering about that plus for way too long... I figured it was probably some sort of escape character. I changed it to an underscore and it works fine now. thanks for the help. jQuery is still weird/new to me and the syntax of it is still tough. – user1977591 Dec 04 '14 at 16:13

score 2 · Answer 2 · answered Dec 04 '14 at 15:57

2

The + is not allowed in class- and id-attributes. In CSS + has a selector-meaning. It means: select the next neighbour-element.

Maybe that's why jQuery can't select your elements. Try to give your ids other names like div_1, 'div_2`,...

Afterwards you can select an element by its id like so $('#div_1').

Since ids should be unique within the whole document this selector should be the same as $('#myPartial #div_1')

answered Dec 04 '14 at 15:57

Fidi

5,323
1
15
24

2

The first sentence is simply not true. – Mr Lister Dec 04 '14 at 15:58
@MrLister Sorry it's called "adjacent"-selector in english - not neighbour-selector: See this post: http://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean Or what do you exactly mean about my sentence? – Fidi Dec 04 '14 at 16:05
Okay I just found another proof, that you're right. My bad then...: http://stackoverflow.com/questions/21378209/css-select-a-class-containing-plus-sign – Fidi Dec 04 '14 at 16:07

score 1 · Answer 3 · edited May 23 '17 at 10:33

1

Use $("#div+" + Id).remove().

That being said, ids are unique, always. Or they should. So, there is no need to find within the parent. See

7.5.2 Element identifiers: the id and class attributes Attribute definitions id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

See the refference

Edit: Based on comments, it is right to say this does not work and this work

$('#div\\+1').remove();

Again, that being said, see this question, although the plus sign is not forbidden to my understanding, jquery has issues with it. If possible, I would remove the plus sign, if not, then use the escaped version.

edited May 23 '17 at 10:33

Community

1
1

answered Dec 04 '14 at 15:59

Ernesto

1,452
1
15
30

You are right, I was surprised it doesn't though. The escaped version seems to work but anyway I would think it's easier to write the code without the plus sign. – Ernesto Dec 04 '14 at 16:11
Yes it's better to rely on valid html and class-names – empiric Dec 04 '14 at 16:12

score 0 · Answer 4 · answered Dec 04 '14 at 15:52

0

Try this

$("#MyPartial #div+" + Id).remove();

answered Dec 04 '14 at 15:52

Vipul Hadiya

852
1
10
22

score 0 · Answer 5 · answered Dec 04 '14 at 15:53

0

IDs should ALWAYS BE DISTINCT ...

Try making them classes, then you can use $("#MyPartial .div+" + Id)

If div+1 is an id twice, only the first one can be accessed.

If the IDs are truly unique (DISTINCT), then just use $("#div+1")

answered Dec 04 '14 at 15:53

rfornal

4,842
5
27
41

2

The OPs users *are* unique, they are simply using the selector incorrectly. – George Dec 04 '14 at 15:54

score 0 · Answer 6 · answered Dec 04 '14 at 15:55

0

ID should always be unique in the page, you don't have to worry about its parent

$("#div+" + Id).remove()

answered Dec 04 '14 at 15:55

Leo

11,955
4
37
58

score 0 · Answer 7 · answered Dec 04 '14 at 15:57

0

Actually the issueis the jquery will escape the plus sign.. what if you do something like

$(document.getElementById(Id)).remove()

answered Dec 04 '14 at 15:57

Sebastian Dominguez

298
3
5

what should be `Id` be ? This make no sense to me – empiric Dec 04 '14 at 16:06
well, it's a variable.. the same as he used in his code.. it makes sense i think – Sebastian Dominguez Dec 04 '14 at 16:18

score 0 · Answer 8 · answered Dec 04 '14 at 16:03

There a tw0 problems with your code. 1. You forgot to put the id selector "#" in front of your div selector. 2. An id cannot contain a "+". I replaced it with a "-" and it works just fine.

var Id = "1";
$("#div-" + Id).remove()

div {
  
  background: blue;
  
  }

div > div {
  
  background: red;
  width: 100px;
  height: 100px;
  display: inline-block;
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="MyPartial">
    <div id="div-1">1</div>
    <div id="div-2">2</div>
    <div id="div-3">3</div>
</div>

How can I select a div by id that is nested within another div?

8 Answers8