Cool Search Results Tagging

by Joe Saad

HTML

<div id="category_tabs">
<ul>
    <li><span class="post-tag">JAVA <span class="delete-tag">x</span></span></li>
    <li><span class="post-tag">PHP <span class="delete-tag">x</span></span></li>
    <li><span class="post-tag">JavaScript  <span class="delete-tag">x</span></span></li>
    <li><span class="post-tag">XML  <span class="delete-tag">x</span></span></li>
    <li><span class="post-tag">Python  <span class="delete-tag">x</span></span></li>
    <li><span class="post-tag">Perl  <span class="delete-tag">x</span></span></li>
    <li><span class="post-tag">C++  <span class="delete-tag">x</span></span></li>
</ul>
</div>

CSS

#category_tabs ul {none outside none; margin:0; padding:0;}

#category_tabs ul li {
    background: none repeat scroll 0 0 #aaa;
    border-radius: 10px 10px 10px 10px;
    display: block;
    float: left;
    font-size: 12px;
    margin: 3px;
    padding:3px 7px; 
}

#category_tabs ul li:hover{background-color:#eaeaea; color:#000;}
#category_tabs ul li{    text-decoration:none;
    color:#fff;}
.delete-tag {cursor:pointer;}

JavaScript

$('.delete-tag').click(function(){
      $(this).closest('li').remove();        

    });