We Keep Coding

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 :
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.

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>
First
Second
Third
Fourth

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>
1
2
3
4

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
test 1
test 2
test 3
test 4

How to change button class in a div while just the last one can keep the change?

I'm using this code to change my buttons's class:
$('button').on('click', function(){
var btn=$(this);
if(btn.attr('class')=='tct-button'){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
The problem is that I have multiple div's with multiple buttons in each. I need to change this so that every time I click on a button in a div the others which were changed by a previous click (in that same div) change back to the default class which is 'tct-button', and just the last clicked button turns to 'tct-button2'. Would you please help me.

use toggleClass in jquery ,there is no need to check hasClass()
$(this).toggleClass("tct-button2 tct-button");
DEMO

Use hasClass()
Determine whether any of the matched elements are assigned the given class.
Code
$('button').on('click', function(){
var btn=$(this);
if(btn.hasClass('tct-button')){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
However I think you need
$('button').on('click', function(){
$('.tct-button2').removeClass('tct-button2'); //Remove all class
$(this).addClass('tct-button2'); //Add the class to current element
});

If you want to add an additional class to your buttons (tct-button2) whilst keeping tct-button on every button you could do what Satpal suggested.
However, from the sounds of it and I may be wrong, if you want to change the classes so that each button only has one class at a time on it (either tct-button or tct-button2) you can do similar to what Satpal suggested and use:
$('button').on('click', function(){
$('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
Here is the example http://jsfiddle.net/lee_gladding/xao46uzs/
to only affect buttons in the div the clicked one belongs to, use a similar method to:
$('button').on('click', function(){
$(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all class in that div
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
(You might want to use a better selector for the parent, possibly a class or what ever your actual html uses)
Example:
http://jsfiddle.net/lee_gladding/xao46uzs/3/

Hide class by default, show that class when clicking a link

How can I have the class on my page .showhide to be hidden by default, but when you click on a link, the contents of .showhide are displayed?
Thank you for your time.

You can use the functions addClass and removeClass to add or remove a class to your element.
For example
$('#myId').addClass('myClass');
or
$('#myId').addClass('myClass');
where
.myClass { display: none; }
is, would add or remove the class myClass to an element with the id myId. Try this fiddle.
Update: The fiddle is updated to remove a div with a link.

jQuery div removeClass() / addClass()

I have a particular div element with "testDiv" class;
<div class="testDiv">Content</div>
Now using jQuery I want to remove the testDiv class and add a different class;
jQuery('div').removeClass('testDiv');
Now how can I add a class to this particular div that got its class remove, i fear that if I do jQuery('div').addClass('newClass'); it will add a class to all the other divs present in the page.

how about:
jQuery('div.testDiv').addClass('newClass').removeClass('testDiv');

jQuery('div.testDiv').toggleClass("testDiv newClass")

adding and removing the selected class to a parent div

OK so now I have my sliding open ul revealing all the list elements, and now I want the title bar that is clicked on to have a state of selected added to it, and then remove that state when it's closed...
the div above the UL has a class of .regionHeader
here's an example of the mark up
<div class="regionHeader">title of the region</div>
<ul class="region"><li>the region i'm hiding/showing</li></ul>
here's the javascript
var stockists = {
start: function() {
$('.region').hide();
$('.regionTitle').each(function(){
$(this).click(function(e){
e.preventDefault();
$(this).parent().next('.region').slideToggle(300);
});
});
}
};
$(stockists.start);
I've been trying addClass but it seems to just add the class and not remove it?

Can you not use toggleClass()
This way the class will be added/removed when you need it to be.
$(this).parent().toggleClass("className");
$(this).parent().next('.region').slideToggle(300);

$(this).parent().toggleClass('activeTitle'); // toggling the class on the parent
$(this).parent().next('.region').slideToggle(300);

to remove a class from an element you have to use removeClass
$(element).removeClass("classname");