Auto-hide Visível Elementos filho

Question

Estou fazendo alguns protótipos usando HTML, JavaScript e CSS. O protótipo é para um conjunto de aplicativos para rodar em um dispositivo móvel. Cada tela é construído em seu próprio DIV. Há uma tela inicial, várias telas de fora que, et cetera.

O usuário deve ser capaz de despejar para a tela inicial a qualquer momento. Há certos elementos em cada tela que são visíveis por padrão, e outros elementos que são feitos especificamente visível, baseados fora determinadas ações.

O problema que estou tendo é que quando definir um dos DIVs tela para oculto, eu ainda pode ver os elementos filhos de que DIV que eu tenho feito especificamente visível. Sei que existe o código pré-existente que esconde todos os elementos filho de um DIV alvo, mas eu só quero esconder o que é que eu fiz visível.

Existe código lá fora que vai me ajudar com isso? Eu posso conceituar uma maneira que eu poderia programa de contornar isso, mas eu não quero reinventar a roda.

HTML Amostra:

<div id="parentDiv">
  <span id="childElement" style="visibility:hidden"></span>
</div>

Amostra JavaScript:

$('childElement').style.visibility = 'visible';
$('parentDiv').style.visibility = 'hidden';

Depois de fazer esta amostra, ainda posso ver childElement.

Nota: usando o Opera no Windows XP

Answer 1

tente usar

$('parentDiv').style.display = "none";

, em seguida, para torná-lo visível

$('parentDiv').style.display = "block"