CODEWITHSUNDEEP
javascriptjquery
user3573535
user3573535

Reputation: 555

Jquery - Can I undo event on previous element?

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.

Upvotes: 1

Views: 517

Answers (6)

Ashraful Islam
Ashraful Islam

Reputation: 935

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.

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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.com/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>

Upvotes: 3

Pete
Pete

Reputation: 58432

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.com/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>

Upvotes: 1

Rob
Rob

Reputation: 127

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;
});

Upvotes: 1

adeneo
adeneo

Reputation: 318222

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.com/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>

Upvotes: 4

Jameson the dog
Jameson the dog

Reputation: 1806

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)
 });

Upvotes: 2

Related Questions