I have HTML structure like:
<a class="parent-element">
<h2 class="link1">link</h2>
</a>
<a class="parent-element">
<h2 class="link2">link</h2>
</a>
<a class="parent-element">
<h2 class="link3">link</a>
</a>
I want to add the class to the parent element for clicked link, and for instance, I click on the "link1" then change the background of his parent then when I click on the "link2" add the class to "link2" and remove from "link1"
I was trying with:
$(".parent-element").addClass("myClass");
But, it's far from what I want to get :)
Thanks in advance!
Use this keyword for adding class to the current element.
$(".parent-element").click(function() {
$(".parent-element").removeClass("active");
$(this).addClass("active");
}).active{
color: hotpink;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="parent-element">
<h2 class="link1">link</h2>
</a>
<a class="parent-element">
<h2 class="link2">link</h2>
</a>
<a class="parent-element">
<h2 class="link3">link</h2>
</a>you can try this -
$(".parent-element").click(function() {
$(".parent-element").removeClass("myClass");
$(this).addClass("myClass");
}).myClass {
color: red;
}<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<a class="parent-element">
<h2 class="link1">link</h2>
</a>
<a class="parent-element">
<h2 class="link2">link</h2>
</a>
<a class="parent-element">
<h2 class="link3">link
</a>you can target the parent with event.target.parentNode.classList.add("clicked") but with your current code, you don't need to target the parent or use js to change the color. Because tag is the clickable element(not h2) and when you click on it, browser knows the event, target element etc.. You can simply create a css class like
a.parent-element:visited {
color: green;
}
so, you dont even need js for it