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.

Answer 1

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

Answer 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')

Answer 3

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.

Answer 4

尝试这个

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

Answer 5

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")

Answer 6

ID在页面中应该始终是唯一的，您不必担心其父代

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

Answer 7

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

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

Answer 8

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>