JQuery click event not working properly with an <i> element

Question

<button type="button" class="add-to-cart"><i class="material-icons">add_shopping_cart</i>cumpara</button>
                <button class="added add-to-cart"><i class="material-icons check">check</i><i class="material-icons clear">clear</i>Adaugat in cos</button>

I have these two buttons with this CSS code:

.add-to-cart
{
    position: relative;
    overflow: hidden;
    line-height: em(48);
    background: complement($rodie);
    border: none;
    color: $gray-100;
    text-transform: uppercase;
    height: em(48);
    width: 100%;
    font-size: em(18);
    display: inline-block;
    transition: all 250ms ease-out;
    &.clicked
    {
        transform: translateX(-100%);
    }
    &:hover
    {
        background: complement(darken($rodie, 10%));
    }
    i
    {
        position: absolute;
        right: 0;
        top: 0;
        font-size: em(18);
        height: em(48);
        width: em(48);
        line-height: em(44);
    }
}

.added
{
    position: absolute;
    right: -100%;
    top: 90%;
    z-index: 22;
    background: $verde-jungla;
    &:hover
    {
        background: $verde-jungla;
    }
    &.clicked
    {
        transform: translateX(-100%);
    }
    .check
    {
        left: 0;
    }
}

.clear
{
    transition: all 100ms ease-in-out;
    height: em(48);
    width: em(48);
    right: 0;
    background: desaturate(red, 30%);
    &:hover
    {
        background: desaturate(darken(red, 10%), 30%);
    }
}

I want the button to respond to a click event by transitioning the second button, which has an icon and a message (that informs the user that the product has been added to the cart) attached to it. The first transition works. When I click on the button, the other one appears as it's supposed to, but when the clear "button" (the <i> with the class of clear) is pressed, it's not working.

This is the JQuery code:

$('.add-to-cart').click(function(){
  $('.add-to-cart').addClass("clicked");
});

$('.clear').click(function(){
event.preventDefault();
  $('.add-to-cart').removeClass("clicked");
});

Keep in mind that if I change the selected element of the second click event, the process works just fine.

Answer 1

Having the .clear button inside an .add-to-cart is asking for problems. When you click .clear , at the same time you click .add-to-cart .

You did add event.preventDefault , but you don't just want to prevent the default. You also need to prevent the event from "bubbling" up. Also, the variable event does not exist, you need to add it as the name of the first argument.

Try:

$('.clear').click(function(event){
  event.stopPropagation();// Stop bubbling up
  event.preventDefault();
  $('.add-to-cart').removeClass("clicked");
});

But a far better solution would be to move .clear outside of the button that has .add-to-car .

Answer 2

   <button type="button" class="add-to-cart"><i class="material-icons">add_shopping_cart</i>cumpara</button>
   <button class="added add-to-cart"><i class="material-icons check">check</i><i class="material-icons clear" style=" padding: 0 10px;">clear</i>Adaugat in cos</button>




 $('.add-to-cart').click(function(){
   $('.add-to-cart').addClass("clicked");
 });

 $('.clear').click(function(event){
   event.stopPropagation();
   event.preventDefault();
   $('.add-to-cart').removeClass("clicked");
 });