Olá, gostaria da ajuda de vocês em um problema que não encontrei a solução. Eu tenho esse código: (exemplo)
.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>
E eu gostaria de saber como eu poderia adicionar esse style ao clicar em um botão:
b {
display: none;
}
Resumindo tudo, gostaria de saber como ocultar os elementos que estão dentro de <b></b>
ao clicar em um botão.