jQuery - Remove Link when clicked

Question

I have 2 to 4 links with same IDs.

Here is my code:

<a href="#" id="link" class="hallo">Next 1</a>
<a href="#" id="link" class="hallo">Next 2</a>
<a href="#" id="link" class="hallo">Next 3</a>
<a href="#" id="link" class="hallo">Next 4</a>
<a href="#" id="link" class="hallo">Next Article</a>

What I want to achieve is to remove the link when its clicked. For instance: when link with text Next 2 is clicked I want to remove that link.

I have tried with this:

$(document).ready(function(){
    $('#link').click(function () {
        $('#link').closest('a.hallo').remove();
    });
});

But It only removes the first link (Next 1) and not other ones.

$(document).ready(function(){
 $('#link').click(function () {
    $('#link').closest('a.hallo').remove();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link" class="hallo">Next 1</a>
<a href="#" id="link" class="hallo">Next 2</a>
<a href="#" id="link" class="hallo">Next 3</a>
<a href="#" id="link" class="hallo">Next 4</a>
<a href="#" id="link" class="hallo">Next Article</a>

Answer 1

First of all the id must be unique of the elements in html, secondly, you are targeting the element with id so every time the first element it finds with id link will be picked up, you need to use class attribute and selector.

HTML:

<a href="#" id="link1" class="hallo">Next 1</a>
<a href="#" id="link2" class="hallo">Next 2</a>
<a href="#" id="link3" class="hallo">Next 3</a>
<a href="#" id="link4" class="hallo">Next 4</a>
<a href="#" id="link5" class="hallo">Next Article</a>

Jquery:

$(document).ready(function(){
    $('.hallo').click(function () {
        $(this).remove(); // remove element which is being clicked
    });
});

what we have written is that whenever an element with class hallo is clicked remove that element $(this) selector will pick the element that currently generated the event which is in our case click event.

Snippet:

$(document).ready(function(){
    $('.hallo').click(function () {
        $(this).remove(); // remove element which is being clicked
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#" id="link1" class="hallo">Next 1</a>
<a href="#" id="link2" class="hallo">Next 2</a>
<a href="#" id="link3" class="hallo">Next 3</a>
<a href="#" id="link4" class="hallo">Next 4</a>
<a href="#" id="link5" class="hallo">Next Article</a>

Answer 2

I have 2 to 4 links with same IDs.

This is a big NO.. you should not have duplicate id's that is the issue in your code.

Problem: your current script $('#link').click(function () { it doesn't select all the elements with the same id. It selects only the first element with that id parsing from top of the HTML. So technically the event is bound only to the first element.

Solution: Remove the duplicate id's and write the script to work on class hallo. use below code

$(document).ready(function(){
    $('.hallo').click(function () {
        $(this).remove();
    });
});

Answer 3

try like this:

use class selector for click not id.

and $(this) - points to clicked link.

$(document).ready(function(){
 $('.hallo').click(function () {
    $(this).remove();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link" class="hallo">Next 1</a>
<a href="#" id="link" class="hallo">Next 2</a>
<a href="#" id="link" class="hallo">Next 3</a>
<a href="#" id="link" class="hallo">Next 4</a>
<a href="#" id="link" class="hallo">Next Article</a>