Javascript or jQuery - Remove attribute pseudo elements

Question

How, via Javascript or jQuery, I can remove or change to None the value of an attribute content of the css below:

.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}

I tried in many ways, without success:

    <script>
        $(document).ready(function () {
            // $('.container').removeProp('content');

            // $('.container').remove();

            // $('.container').removeAttr('style');   

            // $(".container:after").prop("style").removeProperty("content");
            // $(".container").removeProperty('content');

            $(".container").css('content', 'none');
        });
    </script>

Answer 1

Like :after is not an object, you will not be able to modify its contents directly. What you can do is inject CSS into the page.

Example:

document.querySelector("button").addEventListener("click", function(){
  document.styleSheets[0].addRule('#texto:after', 'content: ""');
})

#texto:after {content: "Text here"}

<div id="texto">O texto é: </div>

<button type="button">Alterar texto</button>

Answer 2

You can change the :after and :before adding a new class to the element with new :after and :before. Changing only the content in the new class, the other original styles of the :after/:before are not affected.

To add the new class, you can use .toggleClass. I put in the example below a timer to illustrate the change after 3 seconds:

$(document).ready(function () {
   tempo = setInterval(function(){
      clearInterval(tempo);
      $("#teste").html("O elemento possui novo before e after!");

      $(".container").toggleClass("n_container");   

   }, 3000);
});

.btn-group-vertical>.btn-group:after,
.btn-group-vertical>.btn-group:before,
.btn-toolbar:after,
.btn-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.modal-header:after,
.modal-header:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
   display: table;
   content: "after e before original";
   color: red;
}

/* novas class after e before */
.n_container:after,
.n_container:before{
   content: "none";
   color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   conteúdo da div
</div>
<div id="teste">Aguarde 3 segundos...</div>

Answer 3

Try to yes!

$(".container").css("content", "none");

Take a look at this link : https://stackoverflow.com/questions/5394951/adding-and-removing-style-attribute-from-div-with-jquery