A dispensa de dados remove completamente o elemento. Em vez disso, use o método .hide () do jQuery.
O método de correção rápida:
Usando javascript embutido para ocultar o elemento ao clicar desta forma:
<div class="alert" style="display: none">
<a class="close" onclick="$('.alert').hide()">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<a href="#" onclick="$('alert').show()">show</a>
http://jsfiddle.net/cQNFL/
No entanto, isso só deve ser usado se você for preguiçoso (o que não é bom se você quiser um aplicativo de fácil manutenção).
O método do-it-right:
Crie um novo atributo de dados para ocultar um elemento.
Javascript:
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide()
// -or-, see below
// $(this).closest("." + $(this).attr("data-hide")).hide()
})
})
e, em seguida, altere dispensar dados para ocultar dados na marcação. Exemplo em jsfiddle .
$("." + $(this).attr("data-hide")).hide()
Isso ocultará todos os elementos com a classe especificada em data-hide, ou seja: data-hide="alert"
ocultará todos os elementos com a classe de alerta.
Xeon06 forneceu uma solução alternativa:
$(this).closest("." + $(this).attr("data-hide")).hide()
Isso ocultará apenas o elemento pai mais próximo. Isso é muito útil se você não quiser dar a cada alerta uma classe exclusiva. Observe que, no entanto, você precisa colocar o botão Fechar no alerta.
Definição de .closest do jquery doc :
Para cada elemento do conjunto, obtenha o primeiro elemento que corresponda ao seletor testando o próprio elemento e percorrendo seus ancestrais na árvore DOM.
alert
) na página. Uma solução para isso seria substituir o conteúdo do retorno de chamada por esta linha$(this).closest("." + $(this).attr("data-hide")).hide();
, o que afetará apenas o elemento pai mais próximo, visto que o botão de dispensar normalmente é colocado dentro do alerta que afeta.