Dynamic remove button is not working using jquery

Question

Below is my code for displaying dynamic controls using jquery, and its working fine

<script type="text/javascript">

    $(document).ready(function() {
        $("input[value='Add']").click(function(e){
            e.preventDefault();

            var year = new Date().getFullYear(),
                DDL_fromProfession = "<select name='ParametersFromSch' id='DDL_FromSchYear'>",
                DDL_ToProfession = "<select name='ParametersToSch'  id='DDL_ToSchYear'>";



            for (var i = year; i >= 1950; --i) {
                DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";

                if (i != year) {
                    DDL_ToProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
                } else {
                    DDL_ToProfession += "<option text='Present' value='Present'>Present</option>";

                }
            }

            DDL_fromProfession += "</select>";
            DDL_ToProfession += "</select>";

            var controls = "<tr><td>From "+ DDL_fromProfession + " To "+DDL_ToProfession+ "</td></tr>";

            controls += "<br/><button type='button' class='btn_rmv'>Remove</button></td></tr>";


             $('#Controls').append(controls);

            return false;
        });

        $('#Controls').on('click', '.btn_rmv', function() {
            var index = $(this).closest('tr').index() + 2

            $('#Controls tr:nth-child(n+' + (index - 2) + ')').remove();

            return false;
        });
    });
</script> 

And below is my view page code where I add dynamic controls:

<tr>
    <td align="center">
        <table id="Controls"> </table>
        <form method="post" action="" class="button_to">
            <div>
                <input value="Add" type="submit" />
            </div>
        </form>
    </td>
</tr>

But i am using the remove button for removing dynamic controls and it's not working, Kindly suggest me where I make mistake.Thanks

Answer 1

You were closing your row and then adding the remove button due to which the remove button was not appearing.

Please find the modified code below.

     $(document).ready(function() {

     $(document).ready(function() {
     $("input[value='Add']").click(function(e)
     {
          e.preventDefault();


    // var field = $("#field").val();
     var year = new Date().getFullYear();


      var DDL_fromProfession = "<select name='ParametersFromSch' id='DDL_FromSchYear'>";
                for (var i = year; i >= 1950; --i) {
                    DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
                }
                DDL_fromProfession += "</select>";

                var DDL_ToProfession = "<select name='ParametersToSch'  id='DDL_ToSchYear'>";
                for (var j = year; j >= 1950; --j) {
                    if (j != year) {
                        DDL_ToProfession += "<option text='" + j + "' value='" + j + "'>" + j + "</option>";
                    }
                    else {
                        DDL_ToProfession += "<option text='Present' value='Present'>Present</option>";

                    }
                }
                DDL_ToProfession += "</select>";


var controls = "<tr><td>From "+ DDL_fromProfession + " To "+DDL_ToProfession+ "</td>";
controls += "<td><button type='button' class='btn_rmv'>Remove</button></td></tr>";

     //$('#Controls').append(newRow);
     $('#Controls').append(controls);
     return false;
  });

            $('#Controls').on('click', '.btn_rmv', function() {
               $(this).parent().parent().remove();
                return false;
            });

 });
 });

The code for remove is also modified, because the previous code removed all the fields instead of the current field alone.

Answer 2

1. Just remove the </td></tr> at the end of the line where you add the two dropdowns:

   var controls = "<tr><td>From "+ DDL_fromProfession + " To "+DDL_ToProfession;
   

   That was preventing the remove control from being added to the table.

2. Use only this line in the btn_rmvs click() function:

   $(this).parent().parent().remove();
   

Fiddle