1

Here is my code.

<div id="list"> <div class="a">1</div><div class="b">1</div></div>
<div id="list"> <div class="a">2</div><div class="b">2</div></div>
<div id="list"> <div class="a">3</div><div class="b">3</div></div>
<div id="list"> <div class="a">4</div><div class="b">4</div></div>

I need to delete

<div id="list"> <div class="a">3</div><div class="b">3</div></div>

I tried $('#list[2]').remove() but it doesn't work. Help me, please.
Nikita Silverstruk
  • 1,097
  • 1
  • 20
  • 42
Richard Kim
  • 21
  • 2

4 Answers4

2

Better not to use the same ids, that's going to mess-up your document as IDs are UNIQUE, use Class instead:

<div class="list"> <div class="a">1</div><div class="b">1</div></div>
<div class="list"> <div class="a">2</div><div class="b">2</div></div>
<div class="list"> <div class="a">3</div><div class="b">3</div></div>
<div class="list"> <div class="a">4</div><div class="b">4</div></div>

Access it thru:

$('div[class="list"]').eq(2).remove();

Or:

$('.list').eq(2).remove();

You see eq(2) because the elements start getting counted from 0, so 2 is your third element with a list class.

Mr.Web
  • 6,992
  • 8
  • 51
  • 86
  • Your first example won't work. Also, don't make up your own attributes. Prefix them with `data-`. – Blender Jul 09 '13 at 23:56
  • @Blender: right, good point, I fixed it. – Mr.Web Jul 09 '13 at 23:58
  • maybe I'm a pedant, but why not `$('div.list').eq(1).remove();`? – Chris O'Kelly Jul 10 '13 at 00:02
  • @Blender, Could you elaborate on 'making up your own attributes'? – Nikita Silverstruk Jul 10 '13 at 00:03
  • @ChrisO'Kelly what's the difference btwn $('div.list') and $('.list')? Can you elaborate? – Mr.Web Jul 10 '13 at 00:05
  • 1
    @NikitaSilverstruk - You should **not** arbitrarily create your own custom attributes for html tags. If you need to add custom data to an element, you should use a custom attribute prefixed by `data-`. More reading [here](http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/all-you-need-to-know-about-the-html5-data-attribute/). – jahroy Jul 10 '13 at 00:09
  • In the given example? little. I wrote that before you had added `$('.list').eq(1).remove();`, which pretty much covers what I was suggesting. It would only make a difference if he had other tags (not divs) that used the list class – Chris O'Kelly Jul 10 '13 at 00:09
  • @jahroy, The article is about HTML5, does the same go for HTML? – Nikita Silverstruk Jul 10 '13 at 00:11
  • 1
    @NikitaSilverstruk - Check out [this](http://stackoverflow.com/q/1735230/778118) and [this](http://stackoverflow.com/q/992115/778118). I think [this answer](http://stackoverflow.com/a/1735268/778118) (along with the comment below) pretty much sums it up. – jahroy Jul 10 '13 at 00:16
0

Replace id="list" to class="list" and try

$(".list:contains('3')").remove();
Alex
  • 11,451
  • 6
  • 37
  • 52
0

Having multiple iterations of an id will cause problems on your page. Change them to the class attribute and manipulate at will!

http://jsfiddle.net/q5Wuh/

Feel free to add a click event to it as well

http://jsfiddle.net/qcGHR/

Zone6
  • 314
  • 2
  • 4
0

If you will use eq(2) it will remove the div at index 2 and remember index is 0 zero based.

For generic answer try below code.

$('.a:contains(3)').parent().remove()

Whatever you need to search specify as argument in contains. Here we are supposed to search '3' so we passing it as 3.

Note: Also always remember that id should in unique in DOM. It's the first and foremost rule.

Check this Demo

Chirag Vidani
  • 2,519
  • 18
  • 26