Sunday, February 12, 2012

How do I remove multiple href links via the ID with jquery?

I'm having issues removing several of my href links that all have the same ID. Here is my code snippet:

$('.delblk').click(function(e) {

var id = $(this).attr('id').substr(7);

$.getJSON("../ajax_blocked.php?op=delete&id="+id, function(data) {
if (data) {

$("#delblk_"+id).each(function() {

My HTML looks like this:

<a href="sent.php" id="delblk_7" class="delblk" ><span class="label label-important">Unblock</span></a>
<a href="sent.php" id="delblk_7" class="delblk" ><span class="label label-important">Unblock</span></a>
<a href="sent.php" id="delblk_8" class="delblk" ><span class="label label-important">Unblock</span></a>

It's only removing the first href link and not both of them. What am I missing?


  1. Description

    The problem is that a id must be unique in your document, use the class attribute instead.

    So you cant use the id (#) selector.

    But you can use the Attribute Equals Selector to iterate through your elements, check my sample and this jsFiddle Demonstration

    w3c The id attribute specifies a unique id for an HTML element (the id attribute value must be unique within the HTML document).


    $("a[id='delblk_"+id+"']").each(function() {
    // ...

    More Information

    jQuery - Attribute Equals Selector
    w3c - ID Attribute
    jsFiddle Demonstration

  2. You can never ever have multiple elements with the same id, use class instead of id

    Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.


    Do you have the same id like you brother, father or everyone else in your country?
    Each HTML page is like a country, and id is ummm like id... must be unique.