$('.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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

Steps to make it work:

1. Added an image that works here
2. Added display: block;
3. Removed position: absolute;
4. Removed .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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>