Question

With the following setup:

<div id="foo"/>​

JavaScript (jQuery 1.8.0):

$('#foo').removeProp('id').prop('id', 'bar');

alert($('#bar').length);
alert($('#foo').length);
alert($('#undefined').length);​

Note that the elements ID has not been updated to bar as I expected it to be (only the final alert yields 1) (Chrome 21)

This seems to be related to my use of removeProp('id'); which, whilst redundant in this example (when I can just set the id to bar directly), is required in my final code.

Now I’m curious as to what the correct way is to remove an ID in JavaScript; should I have used removeAttr()? Is this a bug in jQuery? Is it legal to remove an ID once setting it?

Answer 1

There are two things to note, here, the first is that the id is an attribute, not a property, so attr()/removeAttr() should be used instead.

The second is the the API for removeProp() explicitly note that you should not:

…use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

Also, rather than unsetting, and then setting, why not simply change it with attr():

$(elem).attr('id', 'newValue');