Javascript 使用jquery动态删除按钮不起作用

下面是我使用jquery显示动态控件的代码，它工作正常

<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> 

$（文档）.ready（函数（）{
$（“输入[value='Add']”）。单击（函数（e）{
e、 预防默认值（）；
变量年份=新日期（）.getFullYear（），
DDL_fromProfession=“”，
DDL_ToProfession=“”；
对于（var i=年份；i>=1950；--i）{
DDL_fromProfession+=“+i+”；
如果（i！=年）{
DDL_ToProfession+=“+i+”；
}否则{
DDL_ToProfession+=“当前”；
}
}
DDL_fromProfessional+=“”；
DDL_ToProfession+=“”；
var controls=“从“+DDL_fromProfession+”到“+DDL_ToProfession+”；
控件+=“
删除”；
$（“#控件”）。追加（控件）；
返回false；
});
$（“#控件”）。在（'单击'，'.btn#u rmv'，函数（）上{
var index=$（this）.closest（'tr'）.index（）+2
$（'#控制tr:n个子项（n++（索引-2）+'））.remove（）；
返回false；
});
});

下面是我添加动态控件的查看页面代码：

<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>

但我正在使用删除按钮删除动态控件，它不起作用，请告诉我哪里出错。谢谢

只需删除添加两个下拉列表的行末尾的

：

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

---

您正在关闭行，然后添加“删除”按钮，因此“删除”按钮没有出现

请在下面找到修改后的代码

     $(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;
            });

 });
 });

$（文档）.ready（函数（）{
$（文档）.ready（函数（）{
$（“输入[value='Add']”）。单击（函数（e）
{
e、 预防默认值（）；
//变量字段=$（“#字段”）.val（）；
变量年份=新日期（）.getFullYear（）；
var DDL_fromProfession=“”；
对于（var i=年份；i>=1950；--i）{
DDL_fromProfession+=“+i+”；
}
DDL_fromProfessional+=“”；
var DDL_ToProfession=“”；
对于（var j=年份；j>=1950；--j）{
如果（j！=年）{
DDL_ToProfession+=“”+j+“”；
}
否则{
DDL_ToProfession+=“当前”；
}
}
DDL_ToProfession+=“”；
var controls=“从“+DDL_fromProfession+”到“+DDL_ToProfession+”；
控件+=“删除”；
//$（“#控件”）.append（newRow）；
$（“#控件”）。追加（控件）；
返回false；
});
$（“#控件”）。在（'单击'，'.btn#u rmv'，函数（）上{
$（this.parent（）.parent（）.remove（）；
返回false；
});
});
});

---

删除的代码也会被修改，因为以前的代码删除了所有字段，而不是当前字段。

请参见“var控件”中，您使用的事件委派应该有效。只需执行一个警报并检查事件是否工作，我正在JSFIDLE上检查它并在其上添加警报，但删除按钮仍然不可见。您在HTML中使用了

.btn_rmv

类？在$（'#控件'）中新行定义在哪里。追加（新行）；？

     $(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;
            });

 });
 });