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?
Description
ReplyDeleteThe 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
You can never ever have multiple elements with the same id, use class instead of id
ReplyDeleteEach 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.
docs
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.