Скачать или смотреть How to Hide Elements Based on Class Changes with JavaScript or jQuery

Discover how to effectively hide an element when another element receives a specific class using JavaScript or jQuery. Step-by-step guide included!
---
This video is based on the question https://stackoverflow.com/q/77455469/ asked by the user 'Villiam Geferson' ( https://stackoverflow.com/u/22888855/ ) and on the answer https://stackoverflow.com/a/77455656/ provided by the user 'Ghost' ( https://stackoverflow.com/u/14945696/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, comments, revision history etc. For example, the original title of the Question was: How to hide element if second element receive an specific class?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction

Have you ever needed to hide one element based on the class of another element? This common situation often arises in web development, especially when dealing with dynamic classes. In this guide, we’ll tackle a specific scenario: hiding a second button when the first button is assigned a particular class—without any click events. Whether you're using JavaScript or jQuery, we’ll walk you through the solution step-by-step.

The Problem

You have two buttons on your webpage:

First Button: <button class="arguments variation-one">Some text</button>

This button has a static class .arguments and a dynamic class that can change (e.g., variation-one, variation-two, variation-three).

Second Button: <button class="simple">Other text</button>

This button should be hidden when the first button receives the class variation-two.

The challenge is to hide the second button when the class change happens, utilizing JavaScript or jQuery without relying on click events.

The Solution

Using jQuery

jQuery simplifies DOM manipulation and event handling, making it a great choice for this task. Here’s a clear and concise solution using jQuery:

Step 1: HTML Setup

Make sure your HTML structure is as follows:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: jQuery Code

Next, you’ll need to write some jQuery code. The snippet below checks if the first button has both the arguments class and the variation-two class. If it does, it hides the second button.

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

$(document).ready(function() {...});: This ensures that your code runs only after the DOM is fully loaded.

let element = $(".arguments.variation-two");: This line selects the first button based on its classes.

if(element.length > 0) {...}: It checks if the button with both classes exists. If it does, the following line is executed.

$(".simple").hide();: This line hides the second button.

Benefits of This Approach

Simple and Efficient: It only runs once when the page loads, making it efficient and straightforward.

No Click events needed: The action is automatically performed based on the class assignment.

Alternative: Pure JavaScript Solution

While jQuery is popular, you may prefer a pure JavaScript solution. Here’s how to achieve the same result without using jQuery:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Hiding one element based on the class of another is a straightforward task using either jQuery or pure JavaScript. By following the steps outlined in this post, you can efficiently manage the visibility of elements on your webpage without complicating your event handling.

Feel free to adapt the code snippets to suit your needs and enhance your web projects with dynamic interactions!