Use jQuery to remove an inline style

Question

<div class="mydiv">
  <ul style="height:111px; width:222px;">
    ...

Is it possible with jQuery (or plain javascript) to remove just the height attribute? Note that there are several instances of .mydiv ul with varying heights.

Answer 1

To remove an attribute, use this:

$(".mydiv UL").css("height", "");

Thanks to am not i am for correcting my answer.

Answer 2

Yes! You can!

If you set the css property to a blank value, it clears it.

So, if your inline style is "background: pink" you can remove it via:

$element.css('background','')

I'm pretty sure I learned that somewhere here on SE but, alas, don't have the specific source to site, so apologies for not being able to give credit where credit is due.

UPDATE:

Well, I suppose I should have gone to the source. From the jQuery documentation (emphasis mine):

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element.

http://api.jquery.com/css/