Hide a Div: “display:none” property

Question

Suppose there is a string of Divs with no ID or name to distinguish them. Like the code bellow:

<div>
<input value="0" name="checkFerramentas[]" id="checkFerramentas" title="Exportar todas operações cadastradas em Compras e Vendas" onclick="checkFerramentas_checkBox_para_textBox(5);" type="CHECKBOX">
</div>

<div>
<input value="1" name="checkFerramentas[]" id="checkFerramentas" title="Exportar parâmetros definidos em Cadastro Geral" onclick="checkFerramentas_checkBox_para_textBox(5);" type="CHECKBOX">
</div>

<div>
<input value="2" name="checkFerramentas[]" id="checkFerramentas" title="Exportar liberações/bloqueios de APR" onclick="checkFerramentas_checkBox_para_textBox(5);" type="CHECKBOX">
</div>

How to hide the second DIV without adding a ID to it? This HTML is generated by a function which I can't edit. Is there any HTML or JS to hide it from "outside"?

Answer 1

This could be a forced solution using CSS pseudo-selectors but its works, good look

div:nth-child(2) {
  display: none;
}

Answer 2

div:nth-child(2) will work but there may be more div elements in the page so we may need to be more specific. for example consider the parent element. if parent element has id , it is better.

div > div:nth-child(2) { display:none; }

or

#parentid > div-child(2) { display:none; }

you can extend the solution.

Answer 3

As a stab in the dark (since you haven't provided much information), what you might really want to do is hide the div containing the input with title "Exportar parâmetros definidos em Cadastro Geral". To do that you could do:

var input = document.querySelector('input[title="Exportar parâmetros definidos em Cadastro Geral"]');
var div = input && input.parentNode; 
div.style.display = 'none';

Of course there are many other ways too.