jQuery - Button Won't Do Anything?

Question

I'm developing a search form with a button that adds up to 4 State/City dropdowns to the form. I'm trying to add a Remove button after each additional State/City set that ultimately should .remove() the parent div from the DOM, but I can't even get it to trigger an alert when clicked. Any ideas what I'm doing wrong?

Here's 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 the 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>

Answer 1

Since you are adding the .remove-this dynamically, use live function to bind the click event.

$('.remove-this').live("click", function() {
   alert('hello');
   // Do Something
});

Answer 2

it should be:

  $('.remove-this').live("click", function() {
            ....

because the element is added to the DOM, so a simple click() won't do.