Pressing a reset button will clear all classes from multiple objects simultaneously

Question

Pressing a reset button will clear all classes from multiple objects simultaneously

Hey there! I have a question about resetting classes when a button is pressed. Here is the HTML setup I am working with:

<a class="test testclass">Test 1</a>
<a class="test testclass">Test 2</a>
<a class="test testclass">Test 3</a>

<a class="reset_all_classes">RESET ME</a>

And here is the jQuery code I am using:

$('.test').click(function(){
    $(this).toggleClass('testclass testclass-active');
})

// Reset by removing all the testclass-active on all the <a>
$('.reset_all_classes').click(function(){
    $('.test').toggleClass('testclass-active testclass');
})

When clicking a hyperlink with the test class, the testclass will change to testclass-active. However, if both Test 1 and Test 3 are selected with testclass-active, pressing the reset button will revert them back to testclass, while leaving Test 2 with testclass-active.

I'm looking for a way to keep Test 1 and Test 3 with the testclass-active when resetting, while still reverting Test 2 back to testclass. Any suggestions on how to achieve this?

Check out the JSFIDDLE HERE

jquery html css

Answer 1

Answer №1

Code Issue

Every time you click on the element, the classes are being changed. However, when attempting to reset as per your code, it is toggling instead of going back to its initial state.

Resolution

Instead of using toggleClass(), I opted for removeClass() and addClass() to return the elements to their original state.

$('.reset_all_classes').click(function(){
    $('.test').removeClass('testclass-active').addClass('testclass');
})

View Working Demo

Answer 2

Code Issue

Every time you click on the element, the classes are being changed. However, when attempting to reset as per your code, it is toggling instead of going back to its initial state.

Resolution

Instead of using toggleClass(), I opted for removeClass() and addClass() to return the elements to their original state.

$('.reset_all_classes').click(function(){
    $('.test').removeClass('testclass-active').addClass('testclass');
})

View Working Demo

Answer 3

Answer №2

$('.click-me').on('click', function() {
  $(this).toggleClass('active');
})

// Reset by removing all the active classes on all the <button>
$('.reset-button').on('click', function() {
  $('.click-me').removeClass("active");
})

.click-me,
.reset-button,
.active {
  display: block;
  width: 100px;
  padding: 5px 10px;
  background-color: lightblue;
  margin: 20px;
  cursor: pointer;
}
.active {
  background-color: green;
}
.reset-button {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click-me">Click Me 1</button>
<button class="click-me">Click Me 2</button>
<button class="click-me">Click Me 3</button>

<button class="reset-button">RESET ME</button>

Answer 4

$('.click-me').on('click', function() {
  $(this).toggleClass('active');
})

// Reset by removing all the active classes on all the <button>
$('.reset-button').on('click', function() {
  $('.click-me').removeClass("active");
})

.click-me,
.reset-button,
.active {
  display: block;
  width: 100px;
  padding: 5px 10px;
  background-color: lightblue;
  margin: 20px;
  cursor: pointer;
}
.active {
  background-color: green;
}
.reset-button {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click-me">Click Me 1</button>
<button class="click-me">Click Me 2</button>
<button class="click-me">Click Me 3</button>

<button class="reset-button">RESET ME</button>

Answer 5

Answer №3

Check out the demo here

With a click on the element with the class "reset_all_classes", the script removes the class "testclass-active" from all elements with the class "test" and adds the class "testclass".

The function is designed to add and remove classes without toggling, offering precise control over which classes are added and removed.

Answer 6

Check out the demo here

With a click on the element with the class "reset_all_classes", the script removes the class "testclass-active" from all elements with the class "test" and adds the class "testclass".

The function is designed to add and remove classes without toggling, offering precise control over which classes are added and removed.

Answer 7

Answer №4

$('.clickme').on('click', function(){
$(this).toggleClass('clicked not-clicked');
})
 
// Reset all classes by removing 'clicked' on all elements
$('.reset').on('click', function(){
$('.clickme').removeClass('clicked');
})

.clicked, .reset, .not-clicked{
  display:block;
  width:100px;
  padding:5px 10px;
  background-color:lightblue;
  margin:20px;
  cursor:pointer;
}

.clicked{
  background-color:green;
}

.reset{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="clickme clicked">Click Me</div>

<button class="reset">Reset All</button>

Answer 8

$('.clickme').on('click', function(){
$(this).toggleClass('clicked not-clicked');
})
 
// Reset all classes by removing 'clicked' on all elements
$('.reset').on('click', function(){
$('.clickme').removeClass('clicked');
})

.clicked, .reset, .not-clicked{
  display:block;
  width:100px;
  padding:5px 10px;
  background-color:lightblue;
  margin:20px;
  cursor:pointer;
}

.clicked{
  background-color:green;
}

.reset{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="clickme clicked">Click Me</div>

<button class="reset">Reset All</button>

Pressing a reset button will clear all classes from multiple objects simultaneously

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Visual representation has a numerical equivalent in HTML code

Expanding the content in Bootstrap Navbar

Having trouble transferring my background image from my FTP to my website

Deactivate a Specific Popup for a Specific Page

Adjust fancybox height using jQuery

Customizing hover effects for select field options

Creating Forward Slashes ('/') Is Not Happening When Appending in jQuery

Best method for developing a jQuery plugin

"Troubleshooting: Click counter in HTML/Javascript unable to function

Is there a way to have the headline gently fade in and subtly rise when the page loads using CSS?

Field where tags are generated by user input

Leverage the OpenWeather Icons to Pinpoint Locations on a Leaflet Map

How to retrieve the user ID of the selected user using JqueryUI autocomplete?

Aligning text in the center of a header, positioned beside an image

Exploring Instagram post layouts: A comparison of card-columns in Chrome versus other web browsers

issue arising where the table's border is not displaying

What is the best way to ensure consistent image sizes using CSS?

Passing HTML content to ASP .NET MVC4's Controller

Is it possible to save jQuery plugin initialization settings for future use?

I need assistance in locating an error; the error message states that $ is not defined and an object is expected