How to remove element after pseudo-content with 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>

Possible duplicate of [Removing an element added by ::before pseudo selector](https://stackoverflow.com/questions/28608023/removing-an-element-added-by-before-pseudo-selector) — Vignesh Raja, Jun 10 '18 at 06:00
https://stackoverflow.com/questions/28608023/removing-an-element-added-by-before-pseudo-selector duplicate — Ullas Hunka, Jun 10 '18 at 06:06

score 2 · Accepted Answer · answered Jun 10 '18 at 06:13

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>

score 0 · Answer 2 · answered Jun 10 '18 at 07:18

0

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

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

answered Jun 10 '18 at 07:18

zemil

3,235
2
24
33

How to remove element after pseudo-content with jQuery

2 Answers2