Ocultar elementos de uma página

Para ocultar elementos em uma página usamos os atributos visibility:hidden ou display:none .

visibility:hidden - oculta um elemento mantendo o espaço que ele ocupava

display:none - oculta um elemento sem manter o espaço que ele ocupava

HTML:


Ocultar com visibility:hidden: <input type="checkbox" id="chk2" onclick="ocultarVisibilty()"> 
<label for="teste2" id="label_teste2"> Teste:</label> 
<input type="text" name="teste" id="teste2">  

Ocultar com display:none: <input type="checkbox" id="chk1" onclick="ocultarDisplay()"> 
<label for="teste1" id="label_teste1"> Teste:</label> 
<input type="text" name="teste1" id="teste1">

Javascript:


function ocultarVisibilty() {
	if(document.getElementById("chk2").checked) {
		document.getElementById("label_teste2").style.visibility = "hidden";
		document.getElementById("teste2").style.visibility = "hidden";
	} else {
		document.getElementById("label_teste2").style.visibility = "";
		document.getElementById("teste2").style.visibility = "";
	}
}

function ocultarDisplay() {
	if(document.getElementById("chk1").checked) {
		document.getElementById("label_teste1").style.display = "none";
		document.getElementById("teste1").style.display = "none";
	} else {
		document.getElementById("label_teste1").style.display = "";
		document.getElementById("teste1").style.display = "";
	}
}