Emblemas de notificação não lidos / lidos em páginas da web - javascript, html, twitter-bootstrap

Então, estou tentando ter emblemas de notificação(baseado na web) que pode ler e não ler, bem, eu não sei qual é o termo certo para isso, mas imagine uma notificação do Facebook, quando você tiver 3 notificações, ela mostrará 3 crachás. Bem, aqui está o site para que você possa entender melhor http://getbootstrap.com/components/#badges. O que eu preciso é que, se eu clicar em um determinado botão, o emblema de notificação desaparecerá.

Aqui está o código do meu botão

<a class="btn btn-default btn-xs" href="#" role="button">View Notification</a>

e aqui está meu código com emblema de notificação, bem, não tente executá-lo, porque você pode ver o design do bootstrap :(

<a href="index.php?cat=notifications" >Notifications<span class="badge">1</span></a>

Respostas:

Uma vez que você está usando bootstrap, e os plug-ins de bootstrap requerem jquery, Presumo que você também está usando jquery.

Você deve primeiro dar ao botão Exibir Notificação e ao ícone de notificação um id, a menos que haja apenas um único botão e um único emblema na página.

Em seguida, você pode simplesmente registrar um manipulador de eventos para quando alguém clicar em seu botão para ocultar o emblema.

$("#view-notification").click(function() {
$("#notification-badge").hide();
});