In web development, it is common to have situations where we need to toggle a class on the closest parent element when a specific element is clicked. This functionality can be quite useful when working with nested elements and complex HTML structures.
To achieve this, we can utilize JavaScript or jQuery to handle the event and perform the necessary DOM manipulations.
Method 1: Using JavaScript (without jQuery):
<!DOCTYPE html>
<html>
<head>
<style>
.toggled {
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<button onclick="toggleClass(this)">Toggle Class</button>
</div>
</div>
<script>
function toggleClass(element) {
// Find the closest parent div with the class "parent"
const parentDiv = element.closest('.parent');
// Toggle the class "toggled" on the parent div
if (parentDiv) {
parentDiv.classList.toggle('toggled');
}
}
</script>
</body>
</html>
In this example, I use the closest() method to find the closest parent <div> element with the class “parent” when the button is clicked. Then, we toggle the class “toggled” on that parent <div> element.
Method 2: Using jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.toggled {
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<button class="toggle-button">Toggle Class</button>
</div>
</div>
<script>
$(document).ready(function() {
$('.toggle-button').click(function() {
// Find the closest parent div with the class "parent"
const parentDiv = $(this).closest('.parent');
// Toggle the class "toggled" on the parent div
if (parentDiv) {
parentDiv.toggleClass('toggled');
}
});
});
</script>
</body>
</html>
In this example, I use jQuery to find the closest parent <div> element with the class “parent” when the button with the class “toggle-button” is clicked. Then, we toggle the class “toggled” on that parent <div> element using the toggleClass() method. Make sure to include the jQuery library in your HTML for this method to work.
🤔 But if I have many elements like .toggle-button?
If you have many elements with the class “.toggle-button” and you want to toggle the class on the closest parent <div> individually for each of them, you can modify the JavaScript/jQuery code to handle multiple buttons and parent <div> elements. You can use a loop or event delegation to achieve this. Here’s how you can do it using both methods:
Method 1: Using JavaScript (without jQuery) with event delegation:
<!DOCTYPE html>
<html>
<head>
<style>
.toggled {
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<button class="toggle-button">Toggle Class</button>
</div>
</div>
<div class="parent">
<div class="child">
<button class="toggle-button">Toggle Class</button>
</div>
</div>
<script>
// Add an event listener to the entire document
document.addEventListener('click', function(event) {
// Check if the clicked element has the class "toggle-button"
if (event.target.classList.contains('toggle-button')) {
// Find the closest parent div with the class "parent"
const parentDiv = event.target.closest('.parent');
// Toggle the class "toggled" on the parent div
if (parentDiv) {
parentDiv.classList.toggle('toggled');
}
}
});
</script>
</body>
</html>
In this example, I use event delegation to handle clicks on multiple buttons with the class “.toggle-button”. When a button is clicked, we check if it has the class “toggle-button” and then find the closest parent <div> with the class “parent” and toggle the class “toggled” on that parent <div>.
Method 2: Using jQuery with event delegation:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.toggled {
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<button class="toggle-button">Toggle Class</button>
</div>
</div>
<div class="parent">
<div class="child">
<button class="toggle-button">Toggle Class</button>
</div>
</div>
<script>
$(document).ready(function() {
// Use event delegation to handle clicks on elements with class "toggle-button"
$(document).on('click', '.toggle-button', function() {
// Find the closest parent div with the class "parent"
const parentDiv = $(this).closest('.parent');
// Toggle the class "toggled" on the parent div
if (parentDiv) {
parentDiv.toggleClass('toggled');
}
});
});
</script>
</body>
</html>
In this jQuery example, we use event delegation with the .on() method to handle clicks on elements with the class “.toggle-button”. When a button with that class is clicked, we find the closest parent <div> with the class “parent” and toggle the class “toggled” on that parent <div>. This approach allows you to handle multiple buttons with the same class efficiently.
Checkout out this in work on codepen
Now you have the tools to toggle a class on the closest parent <div> element when clicked using both JavaScript and jQuery. Experiment with these methods in your projects and enhance the interactivity of your web applications!
Happy coding !! 👨🏻💻👩🏽💻
