Removing span issue

[mfsinc]

I have a recipes application that looks like this:http://i.stack.imgur.com/FxL7R.pngAt the end of ingredient span is a delete button. For some reason, my code is not working (which means its not deleting the ingredient span):HTML:\[code\] <div class='formelementcontainer funky'> <label for="ingredient">Ingredients</label> <div id='ingredientsCOUNT' class='sortable'> <span> <input type="text" class='small' name="ingredient" id="ingredient" placeholder='QTY'/> <select name='measurements'> <option value='' name='' checked='checked'>--</option> <?foreach ($measurements as $m):?> <option value='http://stackoverflow.com/questions/15626143/<?=$m->id;?>'><?=$m->measurement;?></option> <?endforeach;?> </select> <input type="text" name="ingredient" id="ingredient" placeholder='Ingredient'/> <a class='float-right delete-button' id='deleteThis' style='margin:10px 2px;' href='http://stackoverflow.com/questions/15626143/#'><img src='http://stackoverflow.com/questions/15626143/<? echo base_url()."public/img/delete.png";?>' height='11' width='11' /></a> </span> </div> <div class="clear"></div> <div class='addSPAN tabover'> <a class='float-right' id='btnAddIngredients' href='http://stackoverflow.com/questions/15626143/#'>Add Ingredient</a> </div> </div>\[/code\]JQUERY:\[code\](function($) { $(document).ready(function () { $('#btnAddIngredients').click(function () { var num = $('#ingredientsCOUNT span').length; var newNum = new Number(num + 1); $('#ingredientsCOUNT > span:first') .clone() .attr('name', 'ingredient' + newNum) .appendTo('#ingredientsCOUNT') .fadeIn(); }); $('#deleteThis').click(function () { var span = $(this).closest('span'); span.fadeOut('slow', function() { span.remove(); }); });});})(jQuery);\[/code\]What's supposed to happen is when I click on the X, the closest span (the containing span) is removed. But when I click on it, nothing happens. Any suggestions? Thanks for all help!EDITHere is a JSFIDDLE: http://jsfiddle.net/sjDk7/1/