$('.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>El código jQuery anterior de alguna manera no funciona. He comprobado la consola y no aparece ningún mensaje de error. El código jQuery se está cargando. Creo que este problema probablemente sea causado por el pseudo-elemento. Me di cuenta de que :before hace que mi etiqueta no tenga ningún ancho, sin embargo, agregué manualmente el ancho y un display:block en la etiqueta y todavía no recibo ninguna respuesta. Es obvio que estoy haciendo algo mal, pero parece que no puedo ver qué es. ¡Ayuda por favor! gracias
Pasos para que funcione:
display: block;position: absolute;.cart porque no está en el HTML de demostración. $('.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>Para que su código cierre con éxito su carrito, debe implementar esa funcionalidad en su código.
En este momento, su función de clic no hace nada más que registrar "Hola" en la consola.
Puede usar la función jquery .hide() para ocultar el carrito ( https://api.jquery.com/hide/ ).
El siguiente código ocultaría el elemento HTML con id="cart" al hacer clic.
$('.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>