JQuery remove styles added

Question

I am new to Javascript, I am using Backbone So I add a style like this(to a link when its clicked)

     $(eventC.target.parentNode).css('border', '1px solid red');

I want the previous link to be cleared of the red border I added when I click on new link

I looked at link below jQuery - remove style added with .css() function

So in essence I want to do this:

$(OLDLINK).css('border', 'none');
$(NewLINK).css('border', '1px solid red');

with events I get from backbone

Is there a simple way to do this? or is this approach just wrong?

offtopic.use classes instead of setting style to you elements. — Aliaksei Bulhak, Aug 12 '14 at 09:15
@AlekseiBulgak I would say that is perfectly on topic, and should be an answer ;) — Rory McCrossan, Aug 12 '14 at 09:19
Yes thanks I tried so many different ways, and this is so much more simple — Jack, Aug 12 '14 at 09:23

score 4 · Accepted Answer · edited Aug 12 '14 at 15:22

4

I suggest using a CSS class for adding the border and to add / remove it like below

CSS:

.borderRed
{
  border : 1px solid red;
}

jQuery:

//remove border from old link
$('.borderRed').removeClass('borderRed');

// add border in new link
$(eventC.target.parentNode).addClass('borderRed');

edited Aug 12 '14 at 15:22

CodesInChaos

106,488
23
218
262

answered Aug 12 '14 at 09:19

Bhushan Kawadkar

28,279
5
35
57

Aah! YESSSSSS! thats great! – Jack Aug 12 '14 at 09:22
Semantic class names are usually a better choice than classes that describe the style. So in this case it could be something like `.activeLink`. – CodesInChaos Aug 12 '14 at 15:23

score 2 · Answer 2 · answered Aug 12 '14 at 09:22

2

If I clearly understand your question, you need something like this

var container = $("div.parent").on("click", "a", function(){
    $(this).addClass("selected");
    container.find("a").not($(this)).removeClass("selected");
});

demo

answered Aug 12 '14 at 09:22

Aliaksei Bulhak

6,078
8
45
75

score 1 · Answer 3 · edited Aug 12 '14 at 09:27

This solution may be as:

Backbone.View.extend ({

 events: {
   "event-which-delete-border a.link":"changeLink",
   "event-which-add-border a.link":"changeLink"
 },
changeLink:function(event) {

 if (event.type == 'event-which-delete-border') {
   $('a.link').css('border', 'none');
 } else if (event.type == 'event-which-add-border')
   $('a.link').css('border', '1px solid red');
 }

})

In this example, words 'event-which-delete-border' and 'event-which-add-border' may be all events from JavaScript, such as 'click' 'mouseover' and etc

score 1 · Answer 4 · edited May 23 '17 at 12:20

You can use any of these three methods-

you can use the .attr() to change the style of the element.
```
$(OLDLINK).attr('style', 'border: none');
$(NewLINK).attr('style','border: 1px solid red');
```
this method is safe to cross browser defects.
the one you are using.
you can use the method as explained by Bhushan above.

the difference between these could be found here- Visibility attribute question

JQuery remove styles added

4 Answers4