How to remove element after pseudo-content with jQuery

debugcn Published at Dev

Behseini

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>

לבני מלכה

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.