如何使用jQuery在伪内容后删除元素

Question

I am working on the following code. How can I remove the pseudo content after the .house on click event using jQuery?

 $('.remove').on('click', function() { $('.house::after').css('display', 'none'); });

 .house { position: absolute; right: 0px; width: 0; height: 0; border-style: solid; border-width: 0 80px 80px 0; border-color: transparent red transparent transparent; } .house::after { position: absolute; content: ""; width: 80px; height: 80px; background: url("http://i.imgur.com/nceI30v.png"); background-repeat: no-repeat; background-position: 75% 40%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="house"></div> <button class="remove">Remove Pseudo</button>

Answer 1

Try this code...

 $('.remove').on('click', function() { $('.house').addClass('removing'); });

 .house { position: absolute; right: 0px; width: 0; height: 0; border-style: solid; border-width: 0 80px 80px 0; border-color: transparent red transparent transparent; } .house::after { position: absolute; content: ""; width: 80px; height: 80px; background: url("http://i.imgur.com/nceI30v.png"); background-repeat: no-repeat; background-position: 75% 40%; } .removing:after{ display:none }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="house"></div> <button class="remove">Remove Pseudo</button>

Answer 2

You should add new class by click .eg: house_without and css:

.house_without:after {
  content: none; /* may be add !important */
}