Remove attribute of HTML tag

Is it possible to remove the attribute of the first HTML <div> tag? So, this:

<div style="display: none; ">aaa</div>

becomes

<div>aaa</div>

from the following:

<div style="display: none; ">aaa</div>
<a href="#" style="display: none; ">(bbb)</a>
<span style="display: none; ">ccc</span>​

Solution 1:

Or pure JavaScript:

document.getElementById('id?').removeAttribute('attribute?')

Solution 2:

To remvove it from literally the first element use .removeAttr():

$(":first").removeAttr("style");

or in this case .show() will show the element by removing the display property:

$(":first").show();

Though you probably want to narrow it down to inside something else, for example:

$("#container :first").removeAttr("style");

If you want to show the first hidden one, use :hidden as your selector:

$(":hidden:first").show();

Solution 3:

Yes, in fact jQuery has something for this purpose: http://api.jquery.com/removeAttr/

Solution 4:

You can use the removeAttr method like this:

$('div[style]').removeAttr('style');

Since you have not specified any id or class for the div, the above code finds a div having inline style in it and then it removes that style from it.

If you know there is some parent element of the div with an id, you can use this code instead:

$('#parent_id div[style]').removeAttr('style');

Where parent_id is supposed to be the id of parent element containing the div under question.