Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't this jQuery code to remove a border from a div work?

Tags:

jquery

css

jsFiddle

I'm trying to remove the border of a div using jQuery, but it's not working. What am I doing wrong?

HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 200px; height: 150px; background-color: #f33; border: 10px solid silver;}
  </style>
</head>
<body>
  <div id="a1"></div>
  <br>
  <br>
  <div id="a3">click</div>  
</body>
</html>

Javascript:

$("#a3").click(function() {
    $('#a1').css("border", ""); 
}):
like image 303
ben Avatar asked Nov 22 '10 00:11

ben


2 Answers

  • Element IDs cannot start with numbers
  • Your scripts ends with :, not ;
  • Set border to none, not an empty string
like image 127
SLaks Avatar answered Sep 28 '22 00:09

SLaks


Even if you get the id's right, I think you want.

$("#three").click(function() {
    $('#one').css("border", "none"); 
});

If you set the border style to an empty string, it won't override that given by the CSS. You need to give it a value that will be applied instead. Using the empty string will remove the style property on the element, leaving the cascading style from the inline style tag to apply.

like image 32
tvanfosson Avatar answered Sep 28 '22 00:09

tvanfosson