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>

<div id="category1_tabs" style="clear:both;">
<ul>
    <li><span class="post-tag">Guitar</span><span class="delete-tag">x</span></li>
    <li><span class="post-tag">Piano</span><span class="delete-tag">x</span></li>
    <li><span class="post-tag">Flute</span> <span class="delete-tag">x</span></li>
    <li><span class="post-tag">Drums</span> <span class="delete-tag">x</span></li>
    <li><span class="post-tag">Violin</span> <span class="delete-tag">x</span></li>
    <li><span class="post-tag">Cello</span> <span class="delete-tag">x</span></li>
    <li><span class="post-tag">Bass Guitar </span> <span class="delete-tag">x</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;}

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

#category1_tabs ul li {
    border:1px solid #eaeaea;
    background: none repeat scroll 0 0 #fff;
    border-radius: 2px 2px 2px 2px;
    display: block;
    float: left;
    font-size: 12px;
    margin: 3px;
    width:100px;
}

#category1_tabs ul li span.post-tag {float:left;margin:5px 0 0 7px;}
#category1_tabs ul li:hover{color:#000;border:1px solid #eaeaea;}
#category1_tabs ul li{    text-decoration:none;
    color:#000;}
#category1_tabs .delete-tag {cursor:pointer; float:right;font-family:courier;background-color:#eaeaea;padding:5px; height:100%;}

JavaScript

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

    });