remove class in jquery function

Question

The issue I am having is if I click on the checkout button right after clicking the remove button it would still change the color of the box eventhough I already have the $(".blueClass").removeClass('classOne'); on the jquery function. What I am trying to accomplish is that when I click on remove, the said box should not change its color when I click checkout unless I click the box again. The complete source code is on the link below.

$( document ).ready(function() {
    $(".boxes" ).click(function() {
  		$(this).addClass('classOne');
	});

	$(".btn-primary").click(function(){
		$(".classOne").addClass('blueClass');
		$(".classOne").append("<div class='wraps'><br><strong>Ordered</strong>");
		$(".classOne").append("<br><button type='button' class='btn btn-info'>Remove</button></div>");
		$(".blueClass").removeClass('classOne');

		$(".btn-info").click(function(){
			$(this).parent().removeClass('blueClass classOne').empty('');
		});
		
	});

});

.leftbox{
	min-height: 100%;
}
.rightbox{
	min-height: 100%;
}
.boxes{
	border: 1px solid black;
	border-radius: 10px;
	min-height: 9em;
	float: left;
	margin: 1em 1em 1em 1em;
	width: 100%; 
}
.wrapper{
	padding-top: 1em;
}
.btn-holder{
	margin-top: 3em;
}

.redClass{
	background-color: red;
}
.greenClass{
	background-color: green;
}
.yellowClass{
	background-color: yellow;
}
.blueClass{
	background-color: blue;
}
.rightbox input{
	width:50%;
	float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" col-md-3 text-center">
						Item 11
					<div class="boxes text-center">
						
					</div>
				
				</div>

<div class=" col-md-3 text-center">
						Item 12
					<div class="boxes text-center">
						
					</div>
				</div>
				</div>

<button type="button" class="btn btn-primary">Checkout</button>

Did you got the answer?

Abel
– Abel

2018-08-09 14:06:14 +00:00
Commented Aug 9, 2018 at 14:06 — Abel
– Abel, Commented Aug 9, 2018 at 14:06

Logar · Accepted Answer · 2018-08-09 09:29:52Z

When a .btn-info is clicked, the event bubbles to the .boxes element, then triggering the listener adding .classOne again :

$(".boxes" ).click(function() {
    $(this).addClass('classOne');
})

You want to stop this bubbling, by simply adding event.stopPropagation in the .btn-info click listener :

$(".btn-info").click(function(e){
    e.stopPropagation();
    $(this).parent()
        .removeClass('blueClass classOne')
        .empty('');
});

And, by the way, adding the listener to the document outside the .btn-primary click callback as @Ankit Agarwal states is a better design, because you will add only one listener one time, not every time the checkout button is clicked.

EDIT

A more proper solution I think, if you don't want to stop your event propagation, which could cause you trouble if for example you want to listen for some "general clicks" on the whole document, you can check the event.target in the .boxes callback, and remove the event.stopPropagation part in the .btn-info callback :

$(".boxes").click(function(e) {
  if(event.target === this)
      $(this).addClass('classOne');
});

$(".btn-info").click(function(){
    $(this).parent()
        .removeClass('blueClass classOne')
        .empty('');
});

Ankit Agarwal · Accepted Answer · 2018-08-09 09:04:07Z

0

Since btn-info button is added dynamically you need to assign click event to that button using the reference of document object. Changing that click function will fix your issue:

$( document ).ready(function() {
  $(".boxes" ).click(function() {
    $(this).addClass('classOne');
  });

  $(".btn-primary").click(function(){
    $(".classOne").addClass('blueClass');
    $(".classOne").append("<div class='wraps'><br><strong>Ordered</strong>");
    $(".classOne").append("<br><button type='button' class='btn btn-info'>Remove</button></div>");
    $(".blueClass").removeClass('classOne');
  });
  $(document).on("click",".btn-info",function(e){
    $(this).parent().removeClass('blueClass classOne').empty('');
  });
});

.leftbox{
	min-height: 100%;
}
.rightbox{
	min-height: 100%;
}
.boxes{
	border: 1px solid black;
	border-radius: 10px;
	min-height: 9em;
	float: left;
	margin: 1em 1em 1em 1em;
	width: 100%; 
}
.wrapper{
	padding-top: 1em;
}
.btn-holder{
	margin-top: 3em;
}

.redClass{
	background-color: red;
}
.greenClass{
	background-color: green;
}
.yellowClass{
	background-color: yellow;
}
.blueClass{
	background-color: blue;
}
.rightbox input{
	width:50%;
	float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" col-md-3 text-center">
    Item 11
  <div class="boxes text-center">
  </div>
</div>

<div class=" col-md-3 text-center">
    Item 12
  <div class="boxes text-center">

  </div>
</div>

<button type="button" class="btn btn-primary">Checkout</button>

answered Aug 9, 2018 at 9:04

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

1 Comment

Logar Over a year ago

This does work, for some reason, but not the one you are stating :) The callback is called even without attaching it to the document, but it is called before the .boxes click callback. With your code the .boxes callback will be called first.

Collectives™ on Stack Overflow

remove class in jquery function

2 Answers 2

EDIT

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related