Как отредактировать псевдоэлемент в фокусе с помощью css или jQuery

Question

Здравствуйте, я хотел бы удалить элемент pseudo при щелчке по полю ввода. Я знаю, что я должен использовать :focus, но по какой-то причине я не могу заставить его работать.

Вот HTML:

<li id="field_1_1"> 
    <div class="ginput_container"> 
     <input name="input_1" id="input_1_1" type="text"> 
     ::after 
    </div> 
</li> 

:after элемент вызывается этим CSS:

#field_1_1 .ginput_container_text:after { 
    content: "\25CF"; 
    position: absolute; 
} 

Моя цель состоит в том, чтобы удалить этот :after элемент, когда пользователь нажимает на поле ввода. Я пробовал CSS и jQuery, и я не мог работать.

Вот что я попытался с помощью CSS:

#footer-form #input_1_1:focus #field_1_1 .ginput_container_text:after { 
    display: none; 
} 

И вот что я попытался с помощью JQuery:

jQuery("#field_1_1").click(function(){ 
    jQuery("#field_1_1 .ginput_container_text:after").remove(); 
}); 

Кто-нибудь есть какие-либо предложения?

Благодаря

Answer 1

Вы не можете изменить псевдо элемент в JQuery. Ваш лучший вариант - изменить этот псевдоэлемент в CSS с дополнительным классом, указывающим альтернативное состояние элемента, а затем просто удалить или добавить этот класс в jQuery.

Например,

#field_1_1 .ginput_container_text:after { 
    content: "\25CF"; 
    position: absolute; 
} 
#field_1_1.clicked .ginput_container_text:after { 
    display:none; 
} 

и

jQuery("#field_1_1").click(function(){ 
    this.addClass('clicked'); 
}); 

Answer 2

я вставил новый класс с пустым :: после содержания и это сработало! Возможно, это просто попытка удалить контент для этого сценария.

jQuery("#field_1_1").click(function(){ 
 
    jQuery("#field_1_1 .ginput_container").addClass('removeAfterMe'); 
 
    
 
});

.ginput_container::after { 
 
    content: "ByeBye"; 
 
    position: absolute; 
 
} 
 

 
.ginput_container.removeAfterMe::after { 
 
    content: ""; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="field_1_1"> 
 
    <div class="ginput_container"> 
 
     <input name="input_1" id="input_1_1" type="text"> 
 
    </div> 
 
</li>