提交并验证后如何删除动态添加的附加元素？

Question

使用 jQuery，我有一个在点击时添加输入字段元素的按钮。成功提交到数据库后如何删除添加的元素？我应该如何验证动态添加的字段，因为它们具有动态名称？

这是表单的sn-p：

$(document).ready(function() {
        var wrapper = $(".input_fields_wrap");
        var count = 0;

        $('p#add_field').click(function(e) {
            e.preventDefault();
            count += 1;
            $('#container').append(
                '<div>\n\
                   <label>Weight</label><input type="text" id="weight_' + count + '" name="weight[]' + '"/>\n\
                <a href="#" class="remove_field">Remove</a><br>'
            );
        });

        $(wrapper).on("click", ".remove_field", function(e) { 
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="productForm">
<div class="messages"></div>
   <label>Product</label><input type="text" id="product" name="product"><br>
   <div id="container" class="input_fields_wrap">
      <label>Available options:</label>
      <div>
         <p id="add_field"><button type="button" href="#"><span>Add new</span></button></p>
      </div>
   </div>
   <button type="submit" name="btnSubmit">Save to database</button>
</form>

这是工作表单的fiddle。

我一直在尝试使用datatables插件来显示数据库的数据。到目前为止，我已经用这个来验证Product 字段。但不知道如何验证动态 `Weight1 字段并在提交到数据库后删除这些字段。

$(document).ready(function() {
    var name = $("#product").val();

    if (product == "") {
        $("#product").closest('.form-group').addClass('has-error');
        $("#product").after('<p class="text-danger">The product field is required</p>');
    } else {
        $("#product").closest('.form-group').removeClass('has-error');
        $("#product").closest('.form-group').addClass('has-success');
    }

    if (product) {
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            dataType: 'json',
            success: function(response) {

                // remove the error 
                $(".form-group").removeClass('has-error').removeClass('has-success');

                if (response.success == true) {
                    $(".messages").html('Success');

                    // reset the form
                    $("#productForm")[0].reset();

                } else {
                    $(".messages").html('Failed.');
                }
            }
        });
    }
    return false;
});

Answer 1

您可以获取使用$("[id*='weight']") 动态创建的输入字段的句柄。

以下示例删除了所有动态输入字段。

$("[id*='weight']").each(function(){
    $(this).parent("div").remove();
})

下面是我点击Validate按钮时写的示例。下面的例子只是给出一个想法。你可以随意修改。

$("#btnValidate").on("click", function(){
    var error = false;
    $("[id*='weight']").each(function(){
        if ($(this).val().trim() === "") error = true;
    });

    if (error)
    {
        alert("Please udpate weight for all rows");
        return false;
    }
})