如何使用 jquery 删除动态字段

Question

我正在构建脚本，我可以在其中添加一些动态字段，然后根据需要将其删除。但是我无法删除脚本中的第一个 el class，因为它删除了 input_fields_container class 中的所有内容。如何正确地做到这一点？这是我的代码：

<div class="input_fields_container">
    <div class="col-lg-12">
        <div class="col-lg-2"></div>
        <button class="btn btn-sm btn-primary add_more_button" style="float: left; margin-bottom: 10px;">
            @lang('main.add more fields')
        </button>
    </div>
    @foreach(Auth::user()->test as $data)
    <div class="el">
        <div class="form-group">
            <label class="col-lg-2 control-label">@lang('main.test')</label>
            <div class="col-lg-6">
                <input type="text" name="test[]" class="form-control" value="{{ $data->test }}" >
            </div>
        </div>
    </div>
    @endforeach
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var max_fields_limit      = 10; //set limit for maximum input fields
        var x = 1; //initialize counter for text box
        $('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
            e.preventDefault();
            if(x < max_fields_limit){ //check conditions
                x++; //counter increment
                $('.input_fields_container').append('<div class="el"><div class="form-group"><label class="col-lg-2 control-label">@lang('main.test')</label><div class="col-lg-6"><input type="text" name="test[]" class="form-control"></div></div><div class="form-group"><label class="col-lg-2 control-label"></div></div><div><a href="#" class="remove_field" style="margin-left:10px;">@lang('main.delete')</a></div></div>');
            }
        });  
        $('.input_fields_container').on("click",".remove_field", function(e){ //user click on remove text links
            e.preventDefault(); $(this).parents().eq(1).remove(); x--;
        })
    });
</script>

Answer 1

试试这个

您需要将 class="el" 更改为 id="el"

$(document).on('click', '.remove_field', function () {
   $('#el').closest('#el').remove();
});

Answer 2

您的 HTML 中的附加结构有误。 remove_field 的 div 不在 '.el' div.

中

试试这个...

$('.input_fields_container').append('<div class="el"><div class="form-group"><label class="col-lg-2 control-label">Main.test</label><div class="col-lg-6"><input type="text" name="test[]" class="form-control"></div></div><div class="form-group"><label class="col-lg-2 control-label"></div><div><a href="#" class="remove_field" style="margin-left:10px;">main.delete</a></div></div></div>');

https://jsfiddle.net/chadsaun/Ljxw03Lp/

Answer 3

您可以在 for 循环中通过 id 给那个 'a' 标签一个 onclick 函数。和 div 的一个 ID，名称为 class 'el'，类似于下面的代码：

     $('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
                    e.preventDefault();
                    if(x < max_fields_limit){ //check conditions
                        x++; //counter increment
                        $('.input_fields_container').append('<div class="el" id='el" + id +"'>
                            <div class="form-group">
                            <label class="col-lg-2 control-label">@lang('main.test')</label>
                            <div class="col-lg-6"><input type="text" name="test[]" class="form-control"></div>
                            </div>
                            <div class="form-group"><label class="col-lg-2 control-label"></div>
                           </div>
                           <div>
                           <a href="#" class="remove_field" onclick="deleteInput('"+id+ "')"  style="margin-left:10px;">@lang('main.delete')</a>
                           </div>
                           </div>');
                    }
                });

然后你可以像下面的代码一样添加 deletInput 函数，在这个函数中，该方法找到 id 为 el+id 的 div 并将其删除：

function deleteInput(id){
            $('#el'+id+'').remove();
        }

请记住，您的 el 元素 ID 必须是唯一的。这是通过 id 删除输入的概念。

希望这对您有所帮助！

如何使用 jquery 删除动态字段

How to delete dynamic field using jquery

javascript

jquery

laravel

laravel-blade