I wanted to ask, if possible to undo action on previous element which fired some event.

To illustrate my question we may use:

HTML :

<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

jQuery :

$('a').on('click',function(e) {
  $(this).addClass('ok');
  // looking a way to manipulate previous <a> which fired event, before i will add class to $(this)
});

If I click first <a> it will add ok class. And all I want to remove this class from <a> on clicking second <a>.

So I click first <a> and it has ok class. Next I click second <a> and second <a> has now ok class but not first one (I called this action Undo).

And is I click third <a>, previous clicked <a> should not have ok class. I hope it's clear.

I wanted to ask, if possible to undo action on previous element which fired some event.

To illustrate my question we may use:

HTML :

<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

jQuery :

$('a').on('click',function(e) {
  $(this).addClass('ok');
  // looking a way to manipulate previous <a> which fired event, before i will add class to $(this)
});

If I click first <a> it will add ok class. And all I want to remove this class from <a> on clicking second <a>.

So I click first <a> and it has ok class. Next I click second <a> and second <a> has now ok class but not first one (I called this action Undo).

And is I click third <a>, previous clicked <a> should not have ok class. I hope it's clear.

• javascript
• jquery

• Thanks for every post. Every post has nice technigues to archive my goal. I was wondering if JQuery has any mechanism, which holds "prevent element" which fired event and is avaliable in Event object, but i see nothing usefull in documentation.... – user3573535 Commented Oct 5, 2016 at 14:24

6 Answers 6

Just remove the class on the sibling elements

$('a').on('click',function(e) {
  $(this).addClass('ok').siblings().removeClass('ok')
});

a {display: block}
.ok {color : red}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">First</a>
<a href="#">Second</a>
<a href="#">Third</a>
<a href="#">Fourth</a>

Just add :

$('a.ok').removeClass('ok'); //if you have 'a' with class 'ok' just in this part of page
//OR 
$(this).siblings().removeClass('ok');

Before :

$(this).addClass('ok');

So it will remove the class ok from all a tags then add it to the clicked one.

Hope this helps.

$('a').on('click',function(e) {
  $(this).siblings().removeClass('ok');
  $(this).addClass('ok');
});

.ok{
  background-color: green;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>

just add the following line after you add the class,

$("a").not(this).removeClass("ok");

so finally your click event function should look like,

$('a').on('click',function(e) {
  $(this).addClass('ok');
  $("a").not(this).removeClass("ok");
});

it will add ok class on the clicked item, and then remove ok class from any 'a' which is not the clicked one.

for your example you can do somthing like this:

 $('a').on('click',function(e) {
      $('a.ok').removeClass('ok'); // this will remove ok class from all a
      $(this).addClass('ok');
     // looking a way to manipulate previous <a> which fired event, before i      will add class to $(this)
 });

This is the Way to remove .ok class from previously clicked element

var prev_a = '';
$('a').on('click',function(e) {
  $(this).addClass('ok');
  $(prev_a).removeClass('ok');
  prev_a = this;
});

I would add a class to all the links that may be clicked and then do the following:

var anchors = $('a.test'); // cache the links for better performance

anchors.on('click',function(e) {
  anchors.removeClass('ok'); // remove the class from all anchors
  $(this).addClass('ok');    // add the class to this anchor
});

.ok {color:green;}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="test">test 1</a>
<a href="#" class="test">test 2</a>
<a href="#" class="test">test 3</a>
<a href="#" class="test">test 4</a>