Question

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

<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不在＆＃39; .el＆＃39;格。

试试这个......

$('.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为'''标记赋予onclick函数。和一个id为div，类名为'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删除动态字段

3 个答案: