javascript - 删除 jQuery 添加的按钮

Question

我正在使用 jQuery 将额外的选择和文本字段添加到表单中。不过，我希望能够使用删除按钮删除添加的文本字段。

一旦添加了一个字段，jQuery 似乎就无法检测到它。

jQuery

var counter = 2;

$("#addButton").click(function () {


    var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'contact-list-div-' + counter).attr("class", 'contact-list-div');

    newTextBoxDiv.after().html('<select></select>' +
    '<input type="text" name="textbox' + counter +
    '" id="textbox' + counter + '" value="" >' + '<button type="button" class="removeButton" id="removeButton-' + counter + '">Remove Button</button>');

    newTextBoxDiv.appendTo("#contact-list");


    counter++;
});


$(".removeButton").click(function() {
    alert(this.id); //this never shows, only on the element that was 
                    //added directly added using html, in this case removeButton-1
});

HTML

    <div id="contact-list">
            <div class="contact-list-div" id="contact-list-div-1">
                <select></select>
                <input>
                <button type='button' class='removeButton' id='removeButton-1'>Remove Button</button>
            </div>
        </div>
    <input type='button' value='Add Button' id='addButton'>

Answer 1

$('#contact-list').on('click', '.removeButton', function() {
    //Your code                        
});