jquery: remove a link with same id as the link who triggered the event?

Question

i have 2 links with same id.

 <a class='showtag' id=" . $row['id'] . " href=''>" . $row['name'] . "</a><a class='removetag' id=" . $row['id'] . " href=''> -</a><br />";

how do i remove the first one by clicking on the second one.

i just need the selector to use with jquery remove().

EDIT: i have tried this one:

$("a[id='" + event.target.id + "']").remove();

but the problem is that it also removes all other of my links that got the same id (i have switched them to class now).

so i need a selector that removes the link before the triggering link and that is a sibling to it (or is next to the triggering link).

thanks

Answer 1

You shouldn't have two DOM elements with the same ID.

The ID attribute is assumed to be unique, you will have problems and cross-browser inconsistencies.

I would recommend you to use a class in your links instead of having duplicate ID's.

But as the two anchors are siblings, you can do something like this (notice that you don't need the id):

$('.removetag').click(function () {
  $(this).prev('.showtag').remove();
});

Answer 2

I would suggest instead, removing the ID from the .removetag link. The problem that I think you'll have w/ the above solution, is you'll remove ALL links that have the 'showtag' class. You really do need to have one link with a unique id. I would suggest:

<a class='showtag' id=show_" . $row['id'] . " href=''>" . $row['name'] . "</a>
<a class='removetag' id=remove_" . $row['id'] . " href='' onclick="$('#show_" . $row['id'] . "'").remove();"> -</a>
<br />";