Como ocultar elementos na minha página com javascript

Para ocultar elementos da sua página com JavaScript, pode utilizar a manipulação de estilos. Aqui estão alguns métodos comuns:

1. Utilização de style.display A forma mais direta é definir a propriedade display como none. Isto remove o elemento do fluxo de layout da página.

// Select the element by ID and hide it
document.getElementById('myElement').style.display = 'none';

// To show the element again
document.getElementById('myElement').style.display = 'block';

2. Utilizar style.visibility Se pretender ocultar o elemento, mas continuar a deixar o espaço ocupado na página, utilize visibility.

// Select the element by ID and hide it
document.getElementById('myElement').style.visibility = 'hidden';

// To show the element again
document.getElementById('myElement').style.visibility = 'visible';

3. Utilização de classList Se pretender adicionar e remover classes para ocultar elementos, pode utilizar classList.

// Add the class 'hidden' to hide the element
document.getElementById('myElement').classList.add('hidden');

// Remove the class 'hidden' to show the element again
document.getElementById('myElement').classList.remove('hidden');

É necessário definir a classe CSS .hidden nas suas CSS:

.hidden {
  display: none;
}

4. Utilizar o atributo hidden Também pode utilizar o atributo hidden, que é um atributo HTML5 padrão.

// Add the 'hidden' attribute to the element
document.getElementById('myElement').hidden = true;

// Remove the 'hidden' attribute to show the element again
document.getElementById('myElement').hidden = false;

Com estes métodos, pode ocultar ligações, textos grandes, botões e outros elementos que não quer que apareçam imediatamente quando a página é carregada.