Question

right now the source code of my page has the following structure:

<span id='648746' class='topic'>linkedin
<a href='' class='hidden unblacklist' onclick='return false'>Restore</a>
<a href='' class='blacklist' onclick='return false'>[X]</a>
</span><br /> 

On pageload, the link with text “Restore” is hidden. When the user clicks the link, I want to add the hidden class to the link that was just clicked, and then I want to remove the hidden class from the other link in the <span></span>. I can get the first part to work, but I am having difficulty with the second part. Here is my attempt:

$(this).addClass("hidden");
console.log($(this).closest("span"));
$(this).closest("span").hasClass("unblacklist")[0].removeClass("hidden");

One of the biggest difficulties of this is that the other link has two classes: “hidden” and “unblacklist”. I think I would know how to do it for one class, but the game changes for two classes.

Thanks in advance!

Edit: So many answers. All of them work, too! Thanks a lot guys.

Answer 1

My solution would use toggleClass():

$(this).parent().children().toggleClass('hidden');