I need to remove a class after adding it clicking on same checkbox, not the document-CodePudding

I'm clicking on a checkbox to add some animation to a div, but when I want this animation to disappear I can only make it happen through $(document) click. Checkbox must add and then remove the class.

 $('#inOrder').click(function(e) {
    $('.border').addClass('colorsborder');
    e.stopPropagation();

  $(document).click(function(e) {
    $('.border').removeClass('colorsborder');
  });

  });
  $('#inOrder').click(function(e) {
    e.stopPropagation();
  });

HTML

<input id="inOrder" type="checkbox" />

CodePudding user response：

Then you want to toggle the class not add it when you click on checkbox

$('#inOrder').click(function(e) {
    $('.border').toggleClass('colorsborder');
....

CodePudding user response：

You may call toggleClass() method on the jQuery object (element) that you want to add or remove the class from. The method toggleClass will either:

add the desired class when the element doesn't have it.
or remove that class when the element has it already.

Here's a basic, live demo to illustrate the functionality:

const checkbox = $('#inOrder'),
  relatedDiv = $('#related');

checkbox.on('change', () => relatedDiv.toggleClass('custom'))

/** just for demo purpose */

#related {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #ccc;
}

#related.custom {
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inOrder" type="checkbox" />
<div id="related">My appearnace will change on checkbox click</div>

The above demo is pnly meant as a showcase of a possible solution that could be applied to your current problem and it WON'T do the exact thing you want to have unless you apply the required changes you need to suit your actual code/structuring.