$('.close_cart').click(function(e) {
e.preventDefault();
$(this).find('.btn_container').remove();
});.btn_container .btn_cart .close_cart {
opacity: 0.8;
cursor: pointer;
margin-left: 1rem;
}
.btn_container .btn_cart .close_cart:before {
content: "";
width: 20px;
height: 20px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url(https://www.gravatar.com/avatar/43730af340cb0a2cc17396e3001a86ac?s=256&d=identicon&r=PG&f=1);
position: absolute;
top: 3.25px;
right: 3px;
transition: all 0.3s ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn_container">
<a class="btn_cart" title="Aaaaa" href="#">
Aaaaa
<i class="close_cart"></i>
</a>
</div>The above jQuery code is somehow not working. I have checked the console and I get no error message. The jQuery code is loading. I think this problem is probably caused by the pseudo-element. I've realised the :before makes my tag not have any width, however, I've manually added width and a display:block on the tag and I'm still not getting any response. It's obvious that I'm doing something wrong but I can't seem to see what is it. Help please! Thank you :D
Steps to make it work:
display: block;position: absolute;.cart class as it's not in the demo HTML.$('.close_cart').click(function(e) {
e.preventDefault();
console.log("Hello");
});.cart .btn_container .btn_cart .close_cart {
opacity: 0.8;
cursor: pointer;
margin-left: 1rem;
}
.btn_container .btn_cart .close_cart:before {
content: '';
width: 20px;
height: 20px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url(https://www.gravatar.com/avatar/43730af340cb0a2cc17396e3001a86ac?s=256&d=identicon&r=PG&f=1);
top: 3.25px;
right: 3px;
transition: all 0.3s ease;
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn_container">
<a class="btn_cart" title="Aaaaa" href="#">
Aaaaa
<i class="close_cart"></i>
</a>
</div>In order to actually have your code successfully close your cart, you need to implement that functionality in your code.
Right now, your click function does nothing but log "Hello" to the console.
You could use the jquery .hide() function to hide the cart (https://api.jquery.com/hide/).
The code below would hide the HTML element with id="cart" upon click.
$('.close_cart').click(function (e) {
e.preventDefault();
$('#cart').hide();
console.log("Hello");
});.cart .btn_container .btn_cart .close_cart {
opacity: 0.8;
cursor: pointer;
margin-left: 1rem;
}
.cart .btn_container .btn_cart .close_cart:before {
content: "";
width: 20px;
height: 20px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url(../_img/close.png);
position: absolute;
top: 3.25px;
right: 3px;
transition: all 0.3s ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cart">
<div class="btn_container">
<a class="btn_cart" title="Aaaaa" href="#">
Aaaaa
<i class="close_cart">x</i>
</a>
</div>
</div>