2

Eu tenho um botão que ao clicar vai desaparecer o botão do lado. Para isso eu tenho esse código:

 document.getElementById("idBotao").style.display="none";

HTML:

<div id="idBotao">
     <a href="javascript:void(0);"  id="$l->img_id ?>" class="btn btn-labeled btn-default pull-right semEmi"> <span class="btn-label"><i class="fa fa-check-square-o"></i></span><?= $this->lang->line("con_inflaud_afe_semEmi"); ?></a>
</div>

Mas ele só funciona uma vez, isso deve ser porque estou chamando pelo id, mas não sei como posso chamar pela classe, tentei mudar esse código mas ele não faz o botão do lado desaparecer. Usei o $(t).hide(); também, mas ele sobe o próprio botão.Isso está dentro de uma função que ao clicar no botão irá executar esse código.

0

4 Respostas 4

2

Para selecionar o elemento por classe você utiliza da seguinte forma.

document.getElementsByClassName("classbutton").style.display="none";
1
  • Já tinha testado esse código antes, mas não sei o motivo não funciona no meu
    – Ketlin
    2/09/2015 às 13:52
2

HTML:

<button id="btn-click">Botao para clicar</button>
<button id="btn-fade">Botao para sumir com id</button>
<button class="fade">Botao 1 para sumir com class</button>
<button class="fade">Botao 2 para sumir com class</button>

JS (utilizando JQuery para evento click):

$('#btn-click').click(function () {
    document.getElementById('btn-fade').style.display = 'none';

    var fadeElements = document.getElementsByClassName('fade')
    for (var e in fadeElements) {
        fadeElements[e].style.display = 'none';
    }
});

Pode-se notar o uso do document.getElementsByClassName(className) , que retorna um array de elementos com a classe passada como parâmetro.

Com o html acima, é demonstrado um hide em elementos com id e classe clicando em um botão.

Pode dar uma olhada neste fiddle para conferir: http://jsfiddle.net/5LkaoatL/

0

Como você quer alterar um único elemento, pode fazer uso da função querySelector(). Ela retorna o primeiro elemento que corresponder ao grupo especificado de seletores.

/**
 * Obtendo os botões:
 * actionButton -> Pego pela tag.
 * button       -> Pego pela classe que ele possui.
 */
var actionButton = document.querySelector('button'),
    button = document.querySelector('.botao-que-vai-sumir');


actionButton.addEventListener('click', function() {
  button.style.display = 'none';
}, false);
<button>botão1</button>
<button class='botao-que-vai-sumir' disabled>botão2</button>

0

vou propor uma solução onde você cria um "elo" entre os dois button, para forjar tal elo, irei utilizar um data custom, no caso data-toggle-for.

var toggleFor = document.querySelectorAll("[data-toggle-for]");
toggleFor = [].slice.apply(toggleFor);

toggleFor.forEach(function (button) {
  var target = document.getElementById(button.dataset.toggleFor);
  button.addEventListener("click", function (event) {
    if (target.classList.contains("invisivel"))
      target.classList.remove("invisivel");
    else
      target.classList.add("invisivel");
  })
})
.invisivel {
  display: none;
}
<div>
  <input id="button1" type="button" value="Button 1" data-toggle-for="button2" />
  <input id="button2" type="button" value="Button 2" />
</div>
<div>
  <input id="button3" type="button" value="Button 3" data-toggle-for="button4" />
  <input id="button4" type="button" value="Button 4" />
</div>

No caso acima, o button1 vai alterar a visibilidade do button2, assim como o button3 vai alterar a visibilidade do button4.

Aconselho o uso de uma classe para tornar o alvo invisivel/visivel, pois removendo esta classe você irá presevar o estilo original do alvo.

Como estamos utilizando um data-* para criar um vinculo entre os button, então os dois buttons podem está em qual quer parte da pagina.

apesar de está usando dois button no exemplo, o codigo acima se aplica a qual quer elemento na pagina (input, div, section, etc).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .