Removing and adding a class on list item click using jquery?

jquery add remove class onclick
jquery add remove class onclick codepen
jquery onclick remove class and addclass
jquery toggle multiple classes
jquery add multiple classes
jquery toggle class
jquery remove all classes
jquery add class

I have a list item with save post text and it has a class of save-post and when I click on it I want to change the text of this list item into unsave post and replace the class save-post within unsave-post class I tried to do this but the change in list item text and class happens only for one time ..

$('.save-post').click(function(){
  $(this).text('Unsave Post');
  $(this).removeClass('save-post');
  $(this).addClass('unsave-post');
});    
$('.unsave-post').click(function(){
  $(this).text('Save Post');
  $(this).removeClass('unsave-post');
  $(this).addClass('save-post');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-2 col-sm-2 col-md-2 drop">
   <a href=""><i class="fa fa-ellipsis-v post-drop"></i></a>
   <div class="drop-content">
     <ul>
       <li class="save-post">Save post</li>
     <li>Report post</li>
     <li>Hide post</li>
     <li>Unfollow User</li>
   </ul>
   </div>
</div>

You can use toggleClass() method and then check the applied class and append the appropriate text

$(document).on('click', '.save-post, .unsave-post', function(e) {
  var that = $(e.currentTarget);
  that.toggleClass('save-post unsave-post');
  if (that.hasClass('save-post')) {
    that.html('Save post');
  } else {
    that.html('Unsave post');    
  }  
});
.save-post {
  color: green
}
.unsave-post {
  color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="save-post">Save post</li>
  <li class="save-post">Save post</li>
  <li class="save-post">Save post</li>
</ul>

jQuery function to add class to one list element on click but remove , The bit I have real problems with and cant get my head around is adding the class to the item that is clicked and removing it from the previously  Try it Yourself - Examples. Change the class name of an element How to use addClass() and removeClass() to remove one class name, and add a new class name. Remove class using a function Using a function to remove a class from the selected elements. Remove several class names How to remove several class names from the selected elements.

When you use .click() is bind event to target selector but after click it class changed to another. You should use event delegation for it.

$(document).on('click', '.save-post', function(){
    $(this).text('Unsave Post');
    $(this).removeClass('save-post');
    $(this).addClass('unsave-post');
});    
$(document).on('click', '.unsave-post', function(){
    $(this).text('Save Post');
    $(this).removeClass('unsave-post');
    $(this).addClass('save-post');
});

$(document).on('click', '.save-post', function(){
    $(this).text('Unsave Post');
    $(this).removeClass('save-post');
    $(this).addClass('unsave-post');
});    
$(document).on('click', '.unsave-post', function(){
    $(this).text('Save Post');
    $(this).removeClass('unsave-post');
    $(this).addClass('save-post');
});
.save-post {color: red}
.unsave-post {color: blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-2 col-sm-2 col-md-2 drop">
  <a href=""><i class="fa fa-ellipsis-v post-drop"></i></a>
  <div class="drop-content">
    <ul>
      <li class="save-post">Save post</li>
      <li>Report post</li>
      <li>Hide post</li>
      <li>Unfollow User</li>
    </ul>
  </div>
</div>  

.toggleClass(), Description: Add or remove one or more classes from each element in the set of matched elements, Toggle the class 'highlight' when a paragraph is clicked. I'm having some issues removing list items upon click after using jquery to add the list items. If I had to guess why this is happenings, it's because jquery might be looking at my original HTML document and not the updated one after adding list items? Either way, I can't figure out how to fix it. Here is my HTML:

Using .click will only attach events to elements that already exist.

You need to use a event handler which monitors for dynamically created clicked events like this on('click',

Then, you can use toggleClass like this

$('.save-post').on('click',function(){
   if ($(this).text() == "Save post")
      $(this).text("Unsave post")
   else
      $(this).text("Save post");
   $(this).toggleClass('save-post');
   $(this).toggleClass('unsave-post');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-2 col-sm-2 col-md-2 drop">
   <a href=""><i class="fa fa-ellipsis-v post-drop"></i></a>
   <div class="drop-content">
     <ul>
         <li class="save-post">Save post</li>
         <li>Report post</li>
         <li>Hide post</li>
         <li>Unfollow User</li>
     </ul>
   </div>
</div>

.removeClass(), Receives the index position of the element in the set and the old class value This example removes the class name of the penultimate <li> from the last <li> . Ok, rather than removing it, sounds like you just want to hide it. If you remove it, you would have to add it again. Easiest way would be to create a class that maybe has 'display:none;' which gets added or removed from that element, you can use jQuery.toggleClass() for this. Something like:.

jQuery removeClass() Method, The removeClass() method removes one or more class names from the How to use addClass() and removeClass() to remove one class name, and add a new  I'm trying to add a class [active] when I click on a element in my menu. Then remove that class [active] when I click on a new item in the menu and add the [active] class to it. I've tried $(this).removeClass("active").addClass("active"); $(this).toggleClass("active"); Basically i'm trying to make the hover() function but with the click even.

jQuery toggleClass() Method, jQuery toggleClass() Method​​ The toggleClass() method toggles between adding and removing one or more class names from the selected elements. This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect. .removeClass( [className ] )Returns: jQuery. Description: Remove a single class, multiple classes, or all classes from each element in the set of matched elements. version added: 1.0.removeClass( [className ] ) className. Type: String. One or more space-separated classes to be removed from the class attribute of each matched element.

jQuery Add and Remove CSS Classes, In this tutorial you will learn how to add or remove CSS classes using jQuery. and the class .highlight to the <p> elements with class .hint on button click. Just specify the space separated list of classes within the addClass() method, like this​  Click on the Add Skill Button to add a new element. Within the demonstration, I have used input fields you can do the same process with any other element like Select, Radio button, Checkbox, etc. If you found this tutorial helpful then don't forget to share. How to Shake an element with jQuery UI. Show and Hide Password Field Text with jQuery

Comments
  • Can you please share the html and post a Minimal, Complete, and Verifiable example of your attempt?
  • rather than binding it to a class that you change, give it another class that doesn't change and bind it to that, otherwise delegate you event
  • Everyone answered with how to do it, nobody explained why the binding is no longer working after the class is changed.
  • thanx a lot you saved my day I was not sure about how to use toggle in such cases