jQuery - Remove Link when clicked
<p>I have 2 to 4 <code>links</code> with same <code>ID</code>s.</p>

<p><em>Here is my code:</em></p>

<pre><code>&lt;a href="#" id="link" class="hallo"&gt;Next 1&lt;/a&gt;
&lt;a href="#" id="link" class="hallo"&gt;Next 2&lt;/a&gt;
&lt;a href="#" id="link" class="hallo"&gt;Next 3&lt;/a&gt;
&lt;a href="#" id="link" class="hallo"&gt;Next 4&lt;/a&gt;
&lt;a href="#" id="link" class="hallo"&gt;Next Article&lt;/a&gt;
</code></pre>

<p>What I want to achieve is to <code>remove</code> the <code>link</code> when its <code>clicked</code>. For instance: <em>when <code>link</code> with text <strong>Next 2</strong> is clicked I want to remove that <code>link</code></em>.</p>

<p><em>I have tried with this:</em></p>

<pre><code>$(document).ready(function(){
    $('#link').click(function () {
        $('#link').closest('a.hallo').remove();
    });
});
</code></pre>

<p>But It only removes the first link <em>(Next 1)</em> and not other ones.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
 $('#link').click(function () {
    $('#link').closest('a.hallo').remove();
 });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;a href="#" id="link" class="hallo"&gt;Next 1&lt;/a&gt;
&lt;a href="#" id="link" class="hallo"&gt;Next 2&lt;/a&gt;
&lt;a href="#" id="link" class="hallo"&gt;Next 3&lt;/a&gt;
&lt;a href="#" id="link" class="hallo"&gt;Next 4&lt;/a&gt;
&lt;a href="#" id="link" class="hallo"&gt;Next Article&lt;/a&gt;</code></pre>
</div>
</div>
</p>