title: How to hide an element with JavaScript
body: <p>I made a form in HTML with Symfony. There is an optional part, I want to hide this part by hiding the &quot;Next&quot; button. I think the JavaScript code is good because the CSS I want to attribute to my element is displayed in the inspector, but it is not used.</p>
  <p>PS : I had no problem to hide an input inside a div. But when I try to hide the button, it doesn't work at all.</p>
  <p>Thank you very much for helping.</p>
  <p><a href="https://i.stack.imgur.com/HUfOK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HUfOK.png" alt="CSS not working" /></a></p>
  <p><strong>JavaScript</strong> code :</p>
  <pre><code>const checkbox = document.querySelector(&quot;input[type=checkbox]&quot;);
  
  checkbox.addEventListener( 'change', function() {
      if(this.checked) {
          document.querySelector(&quot;.optional&quot;).style.display = &quot;none !important&quot;;
      } else {
          document.querySelector(&quot;.optional&quot;).style.display = &quot;initial&quot;;
      }
  });
  </code></pre>
  <p>EDIT :
  <strong>register.html.twig</strong> code :</p>
  <pre><code>{% extends 'base.html.twig' %}
  
  {% block title %}Incris-toi sur Go Zpeak !{% endblock %}
  
  {% block main %}
  
  {{ form_start(userform) }}
  
      &lt;div class=&quot;form container&quot;&gt;
  
          &lt;div class=&quot;formpage&quot;&gt;
              
              &lt;div class=&quot;form-floating mb-3&quot;&gt;
                  {{ form_widget(userform.email, {'attr' : {'placeholder' : 'Mon adresse e-mail', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.email, 'Mon adresse e-mail', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;form-floating mb-3&quot;&gt;
                  {{ form_widget(userform.password.first, {'attr' : {'placeholder' : 'Mon mot de passe', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.password.first, 'Mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;form-floating&quot;&gt;
                  {{ form_widget(userform.password.second, {'attr' : {'placeholder' : 'Confirmation de mon mot de passe', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.password.second, 'Confirmation de mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;form-checkbox&quot;&gt;
                  {{ form_widget(userform.roles) }}
                  &lt;span class=&quot;checkbox&quot;&gt;&lt;/span&gt;
                  &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button type=&quot;button&quot; class=&quot;next btn btn-lg btn-outline-primary mt-4 d-flex mx-auto&quot;&gt;Je m'inscris&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;formpage&quot;&gt;
              &lt;div class=&quot;form-floating mb-3&quot;&gt;
                  {{ form_widget(userform.occupation, {'attr' : {'placeholder' : 'Quelle est ton occupation (ton métier, tes études…) ?', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.occupation, 'Quelle est ton occupation (ton métier, tes études…) ?', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;mb-3&quot;&gt;
                  &lt;p&gt;De quel pays es-tu originaire ?&lt;/p&gt;
                  {{ form_widget(userform.nationality) }}
              &lt;/div&gt;
              &lt;div class=&quot;mb-3&quot;&gt;
                  &lt;p&gt;Quelle est ta langue maternelle ?&lt;/p&gt;
                  {{ form_widget(userform.nativelanguage) }}
              &lt;/div&gt;
              &lt;div class=&quot;d-flex&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto&quot;&gt;&amp;lt;&lt;span class=&quot;previous&quot;&gt;Précédent&lt;/span&gt;&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;next optional btn btn-lg btn-outline-primary mt-4 d-flex ms-auto&quot;&gt;Suivant&lt;/button&gt;
                  &lt;button class=&quot;btn optional-validation btn-lg btn-outline-primary mt-4 d-flex ms-auto&quot;&gt;Je valide&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;formpage&quot;&gt;
              &lt;div class=&quot;mb-3&quot;&gt;
                  &lt;p&gt;Quelle langue souhaites-tu pratiquer ?&lt;/p&gt;
                  &lt;div class=&quot;wishedlanguagelist&quot;&gt;
                      {{ form_widget(userform.wishedlanguages, {'attr' : {'class' : 'form-control mb-3'}}) }}
                  &lt;/div&gt;
                  &lt;div class=&quot;d-flex justify-content-between&quot;&gt;
                      &lt;button type=&quot;button&quot; class=&quot;question-button btn btn-outline-secondary&quot; id=&quot;addwishedlanguage&quot;&gt;+ Ajouter une langue&lt;/button&gt;
                      &lt;button type=&quot;button&quot; class=&quot;question-button btn btn-outline-secondary&quot; id=&quot;removewishedlanguage&quot;&gt;- Supprimer la dernière langue&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;d-flex&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto&quot;&gt;&amp;lt;&lt;span class=&quot;previous&quot;&gt;Précédent&lt;/span&gt;&lt;/button&gt;
                  {{ form_row(userform.save, {'attr' : {'class' : 'btn btn-lg btn-outline-primary mt-4 d-flex ms-auto'}}) }}
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  {{ form_end(userform) }}
  
  {% endblock %}
  
  {% block js %}
  
  &lt;script src=&quot;../assets/js/scripts.js&quot;&gt;&lt;/script&gt;
  
  {% endblock %}   
  </code></pre>