JQuery - button won't do anything?

I am developing a search form with a button that adds up to 4 State / City drop-down lists to the form. I am trying to add a “Delete” button after each additional set of states / cities, which ultimately should be the .remove()parent div from the DOM, but I can’t even get it to start alertwhen clicked. Any ideas what I'm doing wrong?

Here is a link to the page in development.

Here's the HTML:

<div id="stuff">
    <div class="holder">
        <select class="state">
            <option>State</option>
        </select>
        <span class="city"></span>
    </div>
</div>

<button id="addone">ADD ONE</button>
<button id="printit">OUTPUT</button>

<div id="output"></div>

Here's jQuery:

<script type="text/javascript">
<!--
$(document).ready(function() {

    $('#addone').click(function() {
        var $newRow = $('.holder:first').clone();
        $newRow.find('select').val('');
        $newRow.find('select.city').hide();

        // THIS IS WHERE THE Remove BUTTON IS APPENDED TO THE FORM
        $newRow.append('<input name="remove-this" type="button" class="remove-this" value="Remove" />');
        if ($('select.state').length < 4) {
            $newRow.appendTo('#stuff');
        } else {
            $newRow.appendTo('#stuff');
            $('#addone').attr('disabled','disabled');
        }
    });

    // THIS IS THE PROBLEM AREA
    $('.remove-this').click(function() {
        alert('hello');
//      $(this).parent().remove();
    });

    $('select.state').live('change',function() {
        $(this).next('span.city').find('select[id*="CITIES"]').val('').hide();
        $(this).next('span.city').find('select[id="' + $(this).val() + 'CITIES"]').show();
    });

    $('#printit').click(function() {
        var output = '';
        $('select.state').each(function() {
            output += $(this).val() + ' : ' + $(this).next('select.city').val() + '<br/>';
        });
        $('#output').html(output);
    });

    $.ajax({
        type: 'GET',
        url: 'cities.xml',
        dataType: 'xml',
        success: function(xml) {
            var select = $('select.state');
            $(xml).find('STATES').each(function() {
                $(this).find('state').each(function() {
                    var value = $(this).attr('value');
                    var label = $(this).text();
                    select.append('<option value="'+ value +'">' + label + '</option>');
                });
            });
            var select = $('span.city');
            $(xml).find('STATES').each(function() {
                $(this).find('state').each(function() {
                    var value = $(this).attr('value');
                    select.append('<select id="'+ value +'CITIES" name="'+ value +'CITIES" class="city"><option>City</option></select>');
                });
            });
            $('#stuff').find('select.city').each(function() {
                var select = $(this).attr('id');
                $(xml).find(select).each(function() {
                    $(this).find('city').each(function() {
                        var value = $(this).text();
                        var select_j = $('#'+select);
                        select_j.append('<option value="'+ value +'">' + value + '</option>');
                    });
                });
            });
        }
    });
});
//-->
</script>