Disappear Button From Side

Question

I have a button that when clicking will disappear the button on the side. For this I have this code:

 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>

But it only works once, that must be because I’m calling for id, but I don’t know what to call for the class, I tried to change this code but it doesn’t make the button on the side disappear. I used the $(t).hide(); also, but it climbs the button itself. This is inside a function that by clicking the button will run this code.

Answer 1

To select the element by class you use as follows.

document.getElementsByClassName("classbutton").style.display="none";

Answer 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 (using Jquery for event 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';
    }
});

One can notice the use of document.getElementsByClassName(className) , that returns an array of elements with the class passed as parameter.

With the html above, an Hide is shown in elements with id and class by clicking a button.

You can take a look at this fiddle to check out: http://jsfiddle.net/5LkaoatL/

Answer 3

As you want to change a single element, you can make use of the function querySelector(). It returns the first element that matches the specified group of selectors.

/**
 * 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>

Answer 4

I will propose a solution where you create a "link" between the two button, to forge such a link, I will use a data custom, in the case 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>

In the above case, the button1 will change the visibility of button2, as well as the button3 will change the visibility of button4.

I advise using a class to make the target invisible/visible, as removing this class will preserve the original target style.

How we’re using a data-* to create a link between the buttons, then the two Buttons can be on whatever part of the page.

although you are using two buttons in the example, the above code applies to which you want element on the page (input, div, Section, etc).