Clear search box on the click of a little "x" inside of it

Question

I'm working on a search form for a tumblr theme. I'm wondering if there's any simple JavaScript, CSS, or jQuery solution that when a little tiny "x" image inside the textbox is clicked, it clears the form? An example of this is on apple.com. Here's the search code I'm working with:

<form id="search" action="/search">
    <p>
        <input type="text" name="q"  placeholder="Search&hellip;" />
    </p>
</form>

Answer 1

It is not INSIDE actually...

Try this:

<span class="search"><img src=lookup><input type=text ><span>x</span></span>

with the style:

span.search 
  {
    display:inline-block;
    border:1px solid black;
    border-radius:0.5em; 
    -webkit-border-radius: 0.5em;    
  }
span.search > input 
  {
    background: none;
    border: none;
  }

Answer 2

To expand on kingjv's solution, this is a simple plugin:
http://jsfiddle.net/PvFSF/

(function ($, undefined) {  
    $.fn.clearable = function () {  
        var $this = this;  
        $this.wrap('<div class="clear-holder" />');  
        var helper = $('<span class="clear-helper">x</span>');  
        $this.parent().append(helper);  
        helper.click(function(){  
            $this.val("");  
        });  
    };  
})(jQuery);

$("#myInput").clearable();