How to add a new style to an html element?

Question

Hello, I would like your help in a problem that I have not found the solution. I have this code: (example)

.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}

<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

And I’d like to know how I could add this style by clicking a button:

b {
  display: none;
  }

In short, I would like to know how to hide the elements within <b></b> by clicking a button.

Answer 1

$(document).ready(function() {
  $("span:first").on("click", function() {
    $("b").css("display","none");
  })
})

.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

Answer 2

Friend adds an id attribute to your tag and gives it a name:

<b id"teste"></b>

After that you can change the style of your jquery button:

$('#teste').on('click', () => {
  $(#teste).css('display', 'none');
});

I hope I’ve helped.

Answer 3

You can use Javascript for this. Just create a button that when clicked will call a function that selects all <b> within the div and adds the display: none:

function ocultaB(){
    var bs = document.querySelectorAll("div[itemprop='description'] b");
    for(var x=0; x<bs.length; x++) bs[x].style.display = "none";
}

.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}

<button onclick="ocultaB()">Clique para Esconder</button>
<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>

Answer 4

To have an on and off effect

$(document).ready(function() {
  var toggle = true;
  $("span:first").on("click", function() {
    if(toggle == true){
       $("b").css("display","none");
       toggle = false;
    }else{
       $("b").css("display","inline");
       toggle = true;
    }
  })
})

.cifra.mono, .cifra.mono pre {
    font: 12pt 'Roboto Mono', monospace;
}
.c_config span {
    display: block;
}	
.c_config a {
    color: #F60;
}
a {
    text-decoration: none;
    outline: none;
}
.cifra b {
    color: #F60;
    font-weight: bold;
    font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
}
strong, b {
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="cifra mono">
  <div class="c_config">
    <span>Tom: <a href="#">G</a></span>
    <span></span>
    <span></span>
  </div>
  <div itemprop="description">
<pre>     <b>G</b>          <b>D</b>
Parabéns pra você
               <b>G</b>
Nesta data querida
              <b>C</b>
Muitas felicidades
       <b>D</b>        <b>G</b>
Muitos anos de vida
    <b>G</b>
Muitos anos de vida
</pre></div></section>