Question

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) {
        e.preventDefault();

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

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

            $("#delblk_"+id).each(function() {
                $(this).remove();
            });
        }
    });

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?

Answer 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).

Sample

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

More Information

• jQuery – Attribute Equals Selector
• w3c – ID Attribute
• jsFiddle Demonstration