jQuery to add and remove textboxes - just removes everything or nothing

Question

So I have a simple ASP.NET/ C# generated html form where I have a list of textboxes that I want to be able to add and/or delete on the fly. There are pre-existing textboxes that are generated from a SP that look like this, with an 'add another textbox' button below:

<tr>
    <td id="lblRole" style="vertical-align:top;" ><strong>The Role *</strong><br />(2000 characters maximum each)</td>
    <td id="rolesColumn">
        <div id="roles-1" class="div_row">
             <textarea name="ctl00$mainContent$uxRolesList$ctl01" rows="5" cols="100" 
                     id="ctl00_mainContent_uxRolesList_ctl01">yuyuy</textarea>
             <input type="button" style="vertical-align:top;" value="X" class="remove-roles-btn" /><br /><br />
        </div>
        <input type="hidden" name="ctl00$mainContent$uxTxtBoxRolesCount" 
                   id="ctl00_mainContent_uxTxtBoxRolesCount" value="1" />                             
    </td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>
        <input type="submit" name="ctl00$mainContent$uxAddRoleBtn" 
                   value="Add a new role requirement" 
                   id="ctl00_mainContent_uxAddRoleBtn" class="btn" />
    </td>
</tr>

My jQuery is this:

$("#ctl00_mainContent_uxAddRoleBtn").live("click", (function (e) {


    var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
    rolesCounter++;
    if (rolesCounter < 10) {
        var rolesCounterText = "0" + rolesCounter;
    } else {
        var rolesCounterText = rolesCounter;
    }

    $('#rolesColumn').append("<div id='roles-" + rolesCounter + "' class='div_row'><textarea name='ctl00$mainContent$uxRolesList$ctl" + rolesCounterText + "' rows='5' cols='100' id='ctl00_mainContent_uxRolesList_ctl" + rolesCounterText + "'></textarea><input class='remove-roles-btn' type='button' value='X' style='vertical-align:top;' /><br /><br /></div>");

        e.preventDefault();

        $('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter);
    }));

    $(".remove-roles-btn").on("click", (function (e) {
        $(this).parents('.div_row').remove();
        e.preventDefault();
        var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
        rolesCounter--;
        $('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter);



    }));

But when I click to add a new textbox, all the textboxes are deleted.

And when I click to delete a textbox, nothing happens.

Thank you.

Answer 1

For remove button you need to use event delegation

$(document).on("click", "#rolesColumn .remove-roles-btn", function (e) {
    e.preventDefault();
    $(this).closest('.div_row').remove();
    var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
    $('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter - 1);
});

$(document).on("click", "#ctl00_mainContent_uxAddRoleBtn", function (e) {
    var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
    rolesCounter++;
    if (rolesCounter < 10) {
        var rolesCounterText = "0" + rolesCounter;
    } else {
        var rolesCounterText = rolesCounter;
    }

    $('#rolesColumn').append("<div id='roles-" + rolesCounter + "' class='div_row'><textarea name='ctl00$mainContent$uxRolesList$ctl" + rolesCounterText + "' rows='5' cols='100' id='ctl00_mainContent_uxRolesList_ctl" + rolesCounterText + "'></textarea><input class='remove-roles-btn' type='button' value='X' style='vertical-align:top;' /><br /><br /></div>");

    e.preventDefault();

    $('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter);
});

Demo: Fiddle

Answer 2

You have a typo in your code:

$("#ctl00_mainContent_uxAddRoleBtn").live("click", (function (e) {
      //-------------------------------------------^----here you can see a "("

and here:

$(".remove-roles-btn").on("click", (function (e) {
               //------------------^-----------------here

but i suggest you to use .on() method:

$(document).on("click", "#ctl00_mainContent_uxAddRoleBtn", function (e) {

and this:

$(document).on("click", ".remove-roles-btn", function (e) {

Answer 3

NOTE, be sure to be using jQuery 1.8.3 or lower , otherwise it will NOT work. All you have to do is change 'on' to 'live'

$(".remove-roles-btn").live("click", (function (e) {

Here is a simple example with your code that shows it working.