css( "background-color", "" ) not working

Question

<table>
   <tr>
       <td class="temp" onclick="removeBGColor();">
             fdgdfgdfgdfgdf
       </td>
   </tr>
</table>

<style type="text/css">
.temp {
    background-color: red;  
} 
</style>
<script language="javascript">
function removeBGColor() {
    $(".temp").css("background-color", "" );
}
</script>

it will not remove the red color from the . what is the solution for this? Thank You

Answer 1

Just set it to transparent instead.

$(".temp").css("background-color", "transparent");

Answer 2

EDIT: my answer isn't always true; see Garrett's comment below.

you have to use camelCase CSS property names with jQuery for some reason:

$('.temp').css('backgroundColor','whatever');

here is some info.

Answer 3

Or you could even just set it to "inherit" so it gets it from the parent.

Answer 4

Calling javascript from your HTML code is not jQuery style. And you can use removeClass() to remove your css background color instead of directly changing your css.

Change your code to something like this

<style type="text/css">
.temp {
    background-color: red;  
} 
</style>

<script language="javascript">
$(function(){
    $("#tdTemp").click(function(){
        $(this).removeClass("temp");
    });
});
</script>

<table>
   <tr>
       <td id="tdTemp" class="temp">
             fdgdfgdfgdfgdf
       </td>
   </tr>
</table>