JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<div class="alert" style="display: none">
<a class="close" data-hide="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<a href="#" onclick="$('.alert').show()">show</a>
CSS
.alert{
width:200px;
}
JavaScript
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide();
/*
* The snippet above will hide all elements with the class specified in data-hide,
* i.e: data-hide="alert" will hide all elements with the alert property.
*
* Xeon06 provided an alternative solution:
* $(this).closest("." + $(this).attr("data-hide")).hide();
* Use this if are using multiple alerts with the same class since it will only find the closest element
*
* (From jquery doc: For each element in the set, get the first element that matches the selector by
* testing the element itself and traversing up through its ancestors in the DOM tree.)
*/
});
});