使用javascript通过数据库动态填充时未删除输入字段

我正在使用javascript添加和删除输入字段。正确添加字段，保存并显示数据。但当我单击从数据库生成的字段中的“删除”按钮时，它并没有被删除。它把我带到了页面的顶部。但如果我单击

添加更多字段

，新字段将通过javascript生成，当我单击其

删除

时，它将被删除。我错在哪里

HTML和JAVASCRIPT

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>

</div>
<?php
// retrieve the user meta
$fb = get_user_meta($user->ID, 'business_sm_fb', false);
if (!empty($fb)) {
    ?>
    <?php foreach ($fb as $f_b) {
        ?>
        <?php foreach ($f_b as $val) { ?>
            <div><input type="text" name="sm_fb[]" type="text" class="regular-text" value="<?php echo $val; ?>" /><a href="#" class="remove_field">Remove</a></div>
        <?php
        }
    }
    ?>
<?php } else {
    ?>
    <div><input type="text" name="sm_fb[]" type="text" class="regular-text" /></div>
<?php } ?>

<script>
    $(document).ready(function () {
        var max_fields = 10; //maximum input boxes allowed
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div><input type="text" name="sm_fb[]" type="text" class="regular-text" /><a href="#" class="remove_field">Remove</a></div>'); //add input box
            }
        });

        $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });
</script>

添加更多字段
问题似乎与
包装器
对象有关：

var wrapper = $(".input_fields_wrap");

$(wrapper).on("click", ".remove_field", function (e) {
    ....
})

在脚本中，您将单击事件绑定到
对象中的所有
字段
项：

var wrapper = $(".input_fields_wrap");

$(wrapper).on("click", ".remove_field", function (e) {
    ....
})

问题是
.remove\u字段
项是通过PHP添加到
.input\u fields\u wrap
div的外部，因此单击事件不起作用

正如您在这里看到的，在
之后，
.input\u fields\u wrap
打开并立即关闭。PHP代码在这个div之外添加输入

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
</div>


添加更多字段

要解决此问题，请在PHP代码块后移动closing div标记。
是否执行.remove（）代码？如果执行与否，我如何使用firebug看到它？谢谢@BendErR。就是这样一个小错误使我发疯D