dom element id equality - html

Question

do two DOM elements have the same id if their ids are set to an empty string?
example:
$('#something').attr('id', '');
$('#something-else').attr('id', '');
//do these now have the same id?
//is there a better way to unset an element's id?
and is this equal to an element that was declared without an id
<div></div>
<div id=''></div>
<div id></div>
<!--how do these compare??-->

Answer 1

The id attribute cannot legally contain an empty string in either HTML 4 or HTML5. That said, the selectors [id] and [id=""] will still match such elements should they appear in a non-conforming document. Note that an empty id attribute is not the same as the lack of an id attribute.
Setting an element's id attribute to the empty string in a script seems to work (DOM level 4 seems to forbid it, but this may be new as it is not specified in DOM level 3 or 2), allowing it to match the aforementioned selectors even when there are other elements with empty id attributes in the same document. This would imply that the elements now do all have the same ID, but considering that elements cannot have empty IDs in a conforming document in the first place I'm not sure how true that statement is. See the following example:
document.getElementById('something').id = '';
document.getElementById('something-else').id = '';
div[id=""] {
color: red;
}
#something {
color: blue;
}
<div>No id</div>
<div id=''>Empty id</div>
<div id='something'>#something</div>
<div id='something-else'>#something-else</div>
//is there a better way to unset an element's id?
To remove an element's id attribute, use removeAttribute() (or removeAttr() in jQuery):
document.getElementById('something').removeAttribute('id');
$('#something-else').removeAttr('id');