Disappearing Button On The Side

Question

Disappearing Button On The Side

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)
#4 by (0 votes)

2

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, this must be because I am calling through id , but I do not know how I can call the class, I tried to change this code but it does not make the side button disappear. I used $(t).hide(); also, but it does go up the button itself. This is inside a function that when clicking the button will execute this code.

javascript

asked by anonymous 02.09.2015 / 15:35

4 answers

Increase the size of a string Change place div with jquery

score 2 · Answer 1

2

To select the element by class you use it as follows.

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

02.09.2015 / 15:49

score 2 · 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';
    }
});

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

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

You can take a look at this fiddle to check out: link

score 0 · Answer 3

Since you want to change a single element, you can use 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>

score 0 · Answer 4

I will propose a solution where you create a "link" between the two buttons, to forge such a link, I will use a data custom , in the data-toggle-for case.

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, button1 will change the visibility of button2 , just as button3 will change the visibility of button4 .

I recommend using a class to make the target invisible / visible, since removing this class will preserve the target's original style.

Since we are using data-* to create a link between the buttons, then the two buttons can be on any part of the page.

Although you are using two buttons in the example, the above code applies to whatever element on the page (input, div, section, etc.).