Geek Answers Handbook

Why does this jQuery code not remove the border from the div?

jsFiddle

I am trying to remove a div border using jQuery but it does not work. 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", ""); }):
+6
jquery css
source share
5 answers
  • Item identifiers cannot begin with numbers
  • Your scripts end with : not ;
  • Set border to none , not an empty string
+16
source share

Even if you get the correct code, I think you want.

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

If you set the border style to an empty string, it will not override the value set by CSS. You need to specify a value that will be applied instead. Using an empty string will remove the style property in the element, as a result of which the cascading style will be applied to the inline style tag.

+6
source share

You have three problems:

  • Item identifiers may not begin with a number.
  • Your JS code ends with : (colon); it should be ; (semicolon) or syntax error.
  • Setting the border to an empty string does not delete the border. Try $('#1').css('border', 'none'); .
0
source share

instead of css("border", ""); use css("border", "none");

But it is equally important to change : by ; at the end of your script as it causes a complete failure.

example http://jsfiddle.net/XWt53/4/

0
source share

Does the div associated with the click event click on you?

 $("#a3").bind('click', function () { $("#a1").css('border', 'none'); });
0
source share

More articles:


All Articles