动态添加/删除输入行 javascript,jquery

Question

The dynamic add/delete input rows is not working properly. The rows are created using add function, but it is not deleted properly. Basically the delete function call is not working.

$(document).ready(function(){
    var counter = 1; //initlal text box count
    $("#addButton").click(function () {
        if(counter > 3){
            alert("Only 3 textboxes allowed");
            return false;
        }
        var selectfield = $('#selectcolumnlist option:selected').val();
        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv');
        newTextBoxDiv.after().html('<label>'+ selectfield + ' : </label>' + '<input type="text" name="textbox_' + selectfield + '" id="textbox_'+selectfield+'" placeholder="' + selectfield + '" value="" /><input type="button" value="Remove Button" class="remove_this" id="removeid" />');
        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
        alert(counter);
    });

    $("#removeid").click(function() {
        alert("i'm in");
    });
}

Answer 1

Assuming you're creating elements in a correct way, I mean, using unique ids, you should use event-delegation :

// This example selects the element with the class 
// .removeid (here you need to set a specific class) or set something unique
// per new dynamically created element.
$("#TextBoxesGroup").on('click', '.remove_this', (function() {
    alert("i'm in");
}));