动态添加/删除输入jquery

Question

我尝试使用JavaScript动态添加和删除一些输入。我有一个id为 nuevaPartida 的按钮，当它被点击时调用一个事件，它会添加两个输入类型的文本（ producto [] 和 cantidad [] ）和两个标签。

此组（输入字段和标签）添加没有任何问题，问题是当我尝试删除组时，单击id为 quitaPartida 的按钮。它只删除最后添加的组，当我再次点击时，没有其他内容被删除，我的意思是，该操作只运行一次，我需要通过点击删除一个组。

HTML

<div class="partidas">
    <div class="masDatos">
        <div class="form-group col-md-6 masProductos">
             {!!Form::label('Producto')!!}
             {!!Form::select('producto[]', $almacenes, null, ['class' => 'form-control select2', 'data-placeholder' => 'SELECCIONE UN PRODUCTO', 'style' => 'width: 100%', 'id'=>'sproducto0'])!!}
        </div>
        <div class="form-group col-md-6 masCantidad">
            {!!Form::label('Cantidad')!!}
            {!!Form::text('cantidad[]', null, ['class' => 'form-control', 'placeholder'=>'Ej. 5', 'data-inputmask'=>'"mask": "999"', 'data-mask', 'id' => 'cantidad'])!!}
        </div>
    </div>
</div>

＆＃13;

＆＃13;

<script>
    var template =  '<div class="masDatos">'+
                        '<div class="form-group col-md-6 masProductos">'+
                          '{!!Form::label('Producto')!!}'+
                          '{!!Form::select('producto[]', $almacenes, null, ['class' => 'form-control select2', 'data-placeholder' => 'SELECCIONE UN PRODUCTO', 'style' => 'width: 100%', 'id'=>'sproducto0'])!!}'+
                        '</div>'+
                        '<div class="form-group col-md-6 masCantidad">'+
                          '{!!Form::label('Cantidad')!!}'+
                          '{!!Form::text('cantidad[]', null, ['class' => 'form-control', 'placeholder'=>'Ej. 5', 'data-inputmask'=>'"mask": "999"', 'data-mask', 'id' => 'cantidad'])!!}'+
                        '</div>'+
                      '</div>';

    $('#nuevaPartida').on('click', function(e){
      //$('.partidas').append(template);
      e.preventDefault();
      $('.partidas').before(template);
    });

    $(document).on('click', '#quitaPartida', function(e){
      e.preventDefault();
      $('.partidas').children('.masDatos').remove();
    });
  </script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

现在您在目标div（.partidas）之前插入动态内容。因此，您的注释行正确地完成了工作，因为您要将内容附加到目标div。取消注释该行，删除错误的行，然后解决。

工作代码段（https://jsfiddle.net/vhdw3v7j/）：

＆＃13;

＆＃13;

var template =  '<div class="masDatos">'+
    '<div class="form-group col-md-6 masProductos">'+
    'foo <input type="text">' +
    '</div>'+
    '<div class="form-group col-md-6 masCantidad">'+
    'foo <input type="text">' +
    '</div>'+
    '</div>';

$('#nuevaPartida').on('click', function(){
  $('.partidas').append(template);
});

$(document).on('click', '#quitaPartida', function(){
  $('.partidas').children('.masDatos').remove();
  // if you want to remove the last added group:
  // $('.partidas').children('.masDatos').last().remove();
});

＆＃13;

.partidas { color: lightgray; background: gray; }
.masDatos { margin-top: 20px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="nuevaPartida">nueva partida</button>
<button id="quitaPartida">quita partida</button>

<div class="partidas"></div>

＆＃13;

＆＃13;

＆＃13;