JQuery fadeOut only works on first element

Question

I have a div containing other div elements which all contain an anchor tag that runs a javascrip function (uses AJAX to delete a row from a table). Example;

 <div id="container">
   <div><a id="btn" onclick="SomeFunction()">Delete</a></div>
   <div><a id="btn" onclick="SomeFunction()">Delete</a></div>
   <div><a id="btn" onclick="SomeFunction()">Delete</a></div>
   ... and so on
 </div>

I then have this Jquery code;

  $("#btn").click(function() {
    $(this).parent("div").fadeOut();
  });

that should fade out each of the elements on click to my knowledge, but it's only fading out the first element, if i click the next elements button's nothing happens.

I don't have extensive JQuery knowledge to understand why this is happening.

IDs **must** be unique and avoid using inline event handlers. — j08691, Nov 05 '14 at 20:57
use class instead of id.Id cannot be duplicate at a page.if u have multiple id only first one will called — Shaiful Islam, Nov 05 '14 at 20:58
The function that's failing in the linked question is different, but it's for the exact same reason. — Sam Hanley, Nov 05 '14 at 21:01

score 5 · Accepted Answer · edited May 23 '17 at 12:05

5

Ids must be unique, use classes instead.

Ids

[...] elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.

classes

Classes allows CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method

Reference

Example

HTML:

<div id="container">
    <div><a class="btn" onclick="SomeFunction()">Delete</a></div>
    <div><a class="btn" onclick="SomeFunction()">Delete</a></div>
    <div><a class="btn" onclick="SomeFunction()">Delete</a></div>
</div>

jQuery:

$(".btn").click(function() // Identify classes by a dot and the class attribute value.
{
    $(this).parent("div").fadeOut();
});

Working Demo

Offtopic: I recommend taking a look at .on().

edited May 23 '17 at 12:05

Community

1
1

answered Nov 05 '14 at 20:56

Jonast92

4,964
1
18
32

Ah... From time to time I've wondered what the difference in ID and Classes where. That worked thanks! – Marcus Price Nov 05 '14 at 21:00
I said the same thing at comment – Shaiful Islam Nov 05 '14 at 21:28
@ShaifulIslam Correct, a minute later after I posted the answer though. – Jonast92 Nov 05 '14 at 21:58

score 0 · Answer 2 · answered Nov 05 '14 at 20:57

0

You can only have one element on a page with the same id. jQuery is getting confused. Use class or attribute selectors instead.

answered Nov 05 '14 at 20:57

Lunster

896
6
17

4

jQuery isn't getting confused, it's doing exactly as intended :P – elzi Nov 05 '14 at 20:57
That is a fair point. – Lunster Nov 05 '14 at 20:58

JQuery fadeOut only works on first element

2 Answers2

Ids must be unique, use classes instead.

Reference

Working Demo