Question

When trying to see why removeAttr doesn’t always seem to work I tried.

$("div#mydiv").css('height','200px');  
$("table").removeAttr("border");  
$("#mydiv").removeAttr("height");  

The table borders attribute is removed OK but not the div height attribute. I need to use other suggested methods such as

$("#mydiv").css('height','auto')  

to alter it but not actually remove it.

I would be interested to know what makes removeAttr not work in this scenario? There is no other css anywhere.

Answer 1

removeAttr refers to the attributes of the tag. So, given:

<span title="my-title" id="my-id" style="height: 4px; padding: 200px;" />

That span has three attributes, title, id, and style. removeAttr will let you remove any of these. But here’s the trick, while removeAttr will let you remove the style attribute, it can only remove both height and padding, it cannot edit either.

This:

$("#my-id").removeAttr("style");

results in:

<!-- not literally, but this is the best way to explain it -->
<span title="my-title" id="my-id" />

---

css, on the other hand, lets you edit that style attribute directly.

This:

$("#my-id").css("height", "2px");

results in:

<span title="my-title" id="my-id" style="height: 2px; padding: 200px;" />

Now, to remove just the height, you can pass an empty string to the second parameter.

This:

$("#my-id").css("height", "");

results in:

<span title="my-title" id="my-id" style="padding: 200px;" />