Use pseudo class and hide the parent div.

You can use any tag like div, h1, p and span etc and using it's pseudo class to hide the tag.

by Aqeel Malik

HTML

<!--
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
-->
<p data-before="X">Second P - can detect mouse events</p>

CSS

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
p {
    position: relative;
    background-color: blue;
    pointer-events:none;
    padding:10px;
}
p:after {
    content: attr(data-before);
    position: relative;
    color: white;
    pointer-events:auto;
    float:right;
		cursor:pointer;
}

JavaScript

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
$(document).on('click', 'p', function() {
    $('p').hide();
});