Develop Reference

How to specifically .remove a class that had an added class in jquery

I have a few buttons that remove aspects of a class list, each class list has the same name but have an added class to specify what category they are e.g.
<li class="alerts news"> </li>
<li class="alerts weather"> </li>
<li class="alerts sports"> </li>
What I'm try to do is when a specific button that removes, say the 'Alert news' and without removing the rest of the alerts, how can you explain to jquery that you want just that element with that added class to be .removed.
jquery -
$(document).ready(function () {
$(".button").click(function () {
if($(".toggle").hasClass("toggleOff")) {
$(".alerts").hasClass('News').remove();
}
});
});
The hasClass doesn't seem to work, can't seem to remove any specific alerts without removing them all. Any help would be appreciated.

hasClass() returns a boolean, it isn't used as a selector method
Change
$(".alerts").hasClass('News').remove();
To
$(".alerts.news").remove();
This will remove only the alerts class that also have the news class

Change class onClick using jquery

I have a navigation that shows an active state using class="active". When a link is clicked, I need to add the "active" class to to the clicked link, and remove the "active" class from all other links.
Here's my code:
<div id="referNav">
<div id="referLink1"></div>
<div id="referLink2"></div>
<div id="referLink3"></div>
</div>
Any help would be greatly appreciated!

Try this:
function changeClass() {
$('#referNav a').removeClass('active');
$(this).addClass('active');
}
And you should also bind the function in javacript like so:
$('#referNav a').on('click', changeClass);
That way, as Travis J points out in the comments, $(this) will reference the correct object.
jsFiddle

What you are going to need to do is make a function called changeClass which will look for class="active" and then remove that class. Then assign the class name active to the element which was just clicked. It would be beneficial to pass the element being clicked to the function so you will know which element were clicked. Otherwise you can use the global object event and see what the current targetElement was.
I am reluctant to just show a solution because this type of question is not encouraged. People should do their own work. However, since this is a simple situation: jsFiddle demo
$("div[id^=referLink] a").click(function(){
$('#referNav .active').removeClass('active');
$(this).addClass('active');
});

My solution
$('#referNav').on('div','click',functin(e){
$(e.target).closest('div[class^="referLink"]').siblings().find('a').removeClass('active');
$(e.target).closest('div').find('a').addClass('active');
});

"this" not working as expected

I've been struggling with this for an hour now, and I can't solve it. I'm new to use this on javascript, but this is really simple, and it's just not working.
Here's the HTML
<ul class="nav pull-right nav-tabs" id="primarynav">
<li class=" navlink">
About
</li>
<li class="navlink active">
Portfolio
</li>
<li class="navlink">
Contact
</li>
</ul>
And the js
$(document).ready(function(){
$(".navlink").click(function(){
$(".navlink").removeClass("active");
this.addClass("active");
});
});
So it should remove class active from all elements with class navlink, and then add class active to the clicked element. But it doesn't.
http://jsfiddle.net/Tckf7/

Change it to:
$(this).addClass("active");
jsFiddle example
.addClass() is a jQuery method and you had been trying to apply it to a non-jQuery object (this vs $(this)).

this refers to the DOMElement to which jQuery has attached the event. To turn it into a jQuery collection and be able to use jQuery methods like addClass, pass it as an argument to $:
$(this).addClass("active");
Inside functions, the this keyword actually refers to the context of the function. In the case of event handlers, the context is the DOMElement that the handler is attached to.

addClass() is a jQuery method but this is just the direct reference to the DOM object. You need to wrap this into a jQuery object first before you can use a jQuery method on it.
$(document).ready(function(){
$(".navlink").click(function(){
$(".navlink").removeClass("active");
$(this).addClass("active");
});
});
DEMO - Using $(this).addClass() instead of this.addClass()
Edit
To elaborate a little on this. You can never call jQuery's addClass() method on a JavaScript object as addClass() is a jQuery method.
To do the same in pure JavaScript, if you want to just use this, you could use element.className, similar to this:
$(document).ready(function(){
$(".navlink").click(function(){
$(".navlink").removeClass("active");
//$(this).addClass("active");
this.className += " active";
});
});
DEMO - Using this.className example
Though if you are using jQuery already it would make little sense not to use $(this).addClass() instead.

this isn't a jQuery object, use $(this) instead.

You should use $(this)
$(document).ready(function(){
$(".navlink").click(function(){
$(".navlink").removeClass("active");
$(this).addClass("active");
});
});
http://jsfiddle.net/Tckf7/2/

Remove class from element and add to next element

I have a list of links, one has the class active.
On my next button click id like to remove the class from the current element and add it to the next only I cant seem to get it to add?
Ive made a fiddle to hopefully explain my problem, any help would be great, thanks
http://jsfiddle.net/h6D4k/
$('.next').click(function(){
$('ul.pagination').find('a.active').removeClass('active');
$('ul.pagination').find('a.active').next('a').addClass('active');
return false;
});

One of the jQuery most usable conveniencies is that its methods are (usually) chainable - in other words, they return the very object they are called from. So you can simply write this:
$('ul.pagination').find('a.active').removeClass('active').closest('li')
.next('li').find('a').addClass('active');
... as it's <li> elements that should be 'nexted', not <a> ones. But in fact, you shouldn't probably discard 'active' altogether if it's the last element in question:
var $a = $('ul.pagination').find('a.active'),
$li = $a.closest('li'),
$nextLi = $li.next('li');
if ($nextLi.length) {
$a.removeClass('active');
$nextLi.find('a').addClass('active');
}

This is actually what you want based on your html structure in you fiddle. http://jsfiddle.net/h6D4k/1/
$('ul.pagination').find('a.active').removeClass('active').parent()
.next().find('a').addClass('active');

Because once you've done this...
$('ul.pagination').find('a.active').removeClass('active');
There is no more a.active - the active classname has been removed from that element. So repeating the same selector...
$('ul.pagination').find('a.active')//...
... will select nothing.
Chain it all together instead.
$('ul.pagination').find('a.active').removeClass('active').next('a').addClass('active');
You have a second problem. According to the jQuery API for next(), it will:
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
You're not trying to get the following sibling:
<ul class="pagination">
<li><a class="one active" href="#">X</a></li>
<li><a class="two" href="#">X</a></li>
<li><a class="three" href="#">X</a></li>
</ul>
Next
Prev
You're trying to get the next <a> in the whole document. That's more challenging - and I'm not sure how to do it.

I would write it this way, preventing the action from doing anything on the last li as well.
http://jsfiddle.net/h6D4k/6/
$('.next').click(function(e){
e.preventDefault();
if ($("ul.pagination a.active").parent().is(":last-child")) return;
$('ul.pagination a.active').removeClass('active').parent().next().find("a").addClass('active');
});

You have two errors in your code:
Once removed, the active class can't be found anymore
your a tags are nested in li tags so next() doesn't work as you expect
To simplify things, you could attach the active class to the li tags.
Live demo: http://jsfiddle.net/h6D4k/7/
Code:
$('.next').click(function(){
$('ul.pagination').find('li.active').removeClass('active')
.next().addClass('active');
return false;
});

How can i know which class was selected via jQuery & JS

I have a list with links:
<li class="link-1">One</li>
<li class="link-2">Two</li>
<li class="link-3">Three</li>
..
user clicks on any link, then with jQuery I want to display the content of the link.. somthing like:
$(".link-??? a").click(function() {
alert($(".link-??? a").html());
})
something like this. I am not going to create X function (as the number of the links), so what can I do? I should replace the ??? in somtehing else..

You could do:
$('li[class^="link"] a').click(...
However this would only work if the li have only one class or if the link-X class is the first in the list.
Inside the handler you can use $(this) to refer to the a element:
alert($(this).text());
Much better would be to give the li elements a common class:
<li class="link">One</li>
<li class="link">Two</li>
<li class="link">Three</li>
$('.link a').click(... will be much more reliable.

Give each element the same class. Then in your javascript reference this within your function. Check out the link below to see a working example
http://jsfiddle.net/kprgr/2/
<li class="link">One</li>
<li class="link">Two</li>
<li class="link">Three</li>
$(".link").click(function() {
alert($(this).find("a").html());
});

Try..
$(".link-??? a").click(function() {
alert(this.innerHTML);
})
Inside the click event, this should refer to the element that was clicked.
You could also do..
alert($(this).html());
..but the first way is simpler, and faster.