ben
ben

Reputation: 29797

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

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", ""); 
}):

Upvotes: 6

Views: 12304

Answers (5)

Tim Gabrhel
Tim Gabrhel

Reputation: 446

Does the div you're clicking on have a click event bound to it?

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196217

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

But equally important is to change the : to ; at the end of your script as it is causing it to fail completely.

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

Upvotes: 0

kevingessner
kevingessner

Reputation: 18995

Well, you've got three problems:

  1. Element IDs may not start with a number.
  2. Your JS code ends with a : (colon); that should be a ; (semicolon), or it's a syntax error.
  3. Setting the border to an empty string doesn't remove the border. Try $('#1').css('border', 'none');.

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532615

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.

Upvotes: 6

SLaks
SLaks

Reputation: 887897

  • Element IDs cannot start with numbers
  • Your scripts ends with :, not ;
  • Set border to none, not an empty string

Upvotes: 16

Related Questions