-1

I want to know is there a way to remove the pseudo ::after. I cant show in code but I have image to explain.

image1

When selecting a checkbox from ::before a ::after will be added now What I want is when selecting another checkbox the other checkbox will lose ::after and will be back to ::before

iamge2

What I tried is

$('.ckbox label').not(this).removeAttr('::after');

But it is not removing the ::after I can say that it is not removing because the style is still there

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Martin
  • 365
  • 4
  • 7
  • 22
  • Look at [this question](https://stackoverflow.com/questions/28608023/removing-an-element-added-by-before-pseudo-selector) – Philipp Maurer Nov 28 '17 at 16:21
  • 2
    Possible duplicate of [Removing an element added by ::before pseudo selector](https://stackoverflow.com/questions/28608023/removing-an-element-added-by-before-pseudo-selector) – Daniel Beck Nov 28 '17 at 16:21
  • @DanielBeck i tried it it is not working because there is still the `::after` so I rreally need to find a way to remove it.. I will try triggering the click for other checkbox maybe it work. is there a drawback if i trigger many checkbox at once? – Martin Nov 28 '17 at 16:31
  • I do not understand what you're saying in that comment at all. If you want to remove content added in a ::before or ::after pseudoclass, you need to do that in CSS (by setting the pseudoclass `content` to an empty string). You can't clear it with "`removeAttr()`" because it is not an attribute, it's a pseudoclass. – Daniel Beck Nov 28 '17 at 16:34
  • @DanielBeck i mean when there is the psuedo :after in the element the state of the element is still check i need to remove it so that the state will be uncheck because I need to only be able to select only 1 from the checkbox. I will try to use radio button but i cant test it now maybe later. – Martin Nov 29 '17 at 02:06
  • You need to change the state of the checkbox? That has nothing to do with the contents of ::after. `$('#checkbox1').prop('checked', false);` (or true as needed.) – Daniel Beck Nov 29 '17 at 02:21
  • 2
    But, yes, if the reason you were trying to do this was to enforce that only one is checked at a time, you would definitely want to be using a radio button for that instead. – Daniel Beck Nov 29 '17 at 02:22
  • `$('#checkbox1').prop('checked', false);` i also have that but in the design the checkbox looks like it is still ticked. – Martin Nov 29 '17 at 05:04
  • changing checkbox to radio solved it @DanielBeck – Martin Nov 29 '17 at 10:43

1 Answers1

4

You can't target pseudo elements this way. However you could add a class that sets the content to "none", or add a class and add the pseudo element that way, then just remove the class when you no longer want it.

.added-class:after {
  content:none
}

$('.ckbox label').addClass('added-class');
Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
mthomp
  • 219
  • 1
  • 8