Dynamic add/delete input rows 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");
    });
}

Are you aware that you're creating multiple elements with the same `id`? Further, I think this is an event-delegation issue. — Ele, Mar 02 '19 at 15:45
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Heretic Monkey, Mar 02 '19 at 15:56

Ele · Answer 1 · 2019-03-02T16:11:03.640

0

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");
}));

edited Mar 02 '19 at 16:11

answered Mar 02 '19 at 15:50

Ele

33,468
7
37
75

Dynamic add/delete input rows javascript,jquery

1 Answers1