2

Estou utilizando a função Clone do jquery para poder replicar uma div. Porém, ao remover esses elementos, independente da quantidade que tenha sido replicado, sempre a função remove a div por completa. Preciso que seja removido linha por linha.

Código do formulário:

<div class="row">
<a class="btn btn-info btn- pull-right" id="add-more-btn" title="Adicionar mais arquivos">Adicionar</a>
<a class="btn btn-warning btn-circle pull-right" id="remove-inputFile-btn">-</a>
</div>
<div class="row arquivo_upload" id="uploadArquivoId">
<div class="col-md-6" >
    <?= $form->field($model, '[0]descricao')->textInput(['maxlength' => true]) ?>
</div>
<div class="col-md-6 ">
    <?= $form->field($model, '[0]arquivo_url')->fileInput()?>
</div>

$('#add-more-btn').on('click', function() {
var clone = $('#uploadArquivoId').clone();
var cloneInput = clone.find('input');
var index = $('.arquivo_upload').length;
$(cloneInput[0]).attr('name', 'ArquivoDocumental['+index+'][descricao]')
$(cloneInput[1]).attr('name', 'ArquivoDocumental['+index+'][arquivo_url]')
$(cloneInput[2]).attr('name', 'ArquivoDocumental['+index+'][arquivo_url]')
$('#row-clone').append(clone);
});

$('#remove-inputFile-btn').on('click', function() {
  $('#row-clone').remove();
});
4
  • 1
    Ao clonar $('#uploadArquivoId') vc vai repetir o id, o que é incorreto.
    – Sam
    Commented 19/11/2018 às 14:29
  • Mas é por ele que seleciono o elemento que vou clonar, no caso, a div por completa.
    – user108720
    Commented 19/11/2018 às 14:34
  • Vc pode selecionar pela classe.
    – Sam
    Commented 19/11/2018 às 14:35
  • Tentei pela classe: var clone = $('.row arquivo_upload').clone(); Mas não funcionou.
    – user108720
    Commented 19/11/2018 às 14:36

1 Resposta 1

1

Ao clonar o elemento <div class="row arquivo_upload" id="uploadArquivoId"> será duplicado o id="uploadArquivoId", o que torna incorreto seu HTML, porque um id deve ser único na página.

Selecione o elemento pela classe .arquivo_upload e apenas o primeiro com :first:

var clone = $('.arquivo_upload:first').clone();

Remova o id que não vai ter mais utilidade, ficando apenas:

<div class="row arquivo_upload">

No evento para remover os elementos, use o seletor :last buscando o último elemento clonado. Ao usar $('#row-clone').remove(); você está removendo a div que recebe os clones toda:

$('#remove-inputFile-btn').on('click', function() {
   $('#row-clone .arquivo_upload:last').remove();
});

Veja um exemplo:

$('#add-more-btn').on('click', function() {
   var clone = $('.arquivo_upload:first').clone();
   var cloneInput = clone.find('input');
   var index = $('.arquivo_upload').length;
   $(cloneInput[0]).attr('name', 'ArquivoDocumental['+index+'][descricao]')
   $(cloneInput[1]).attr('name', 'ArquivoDocumental['+index+'][arquivo_url]')
   $(cloneInput[2]).attr('name', 'ArquivoDocumental['+index+'][arquivo_url]')
   $('#row-clone').append(clone);
});

$('#remove-inputFile-btn').on('click', function() {
   $('#row-clone .arquivo_upload:last').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="row">
   <a class="btn btn-info btn- pull-right" id="add-more-btn" title="Adicionar mais arquivos">Adicionar</a>
   <a class="btn btn-warning btn-circle pull-right" id="remove-inputFile-btn">-</a>
</div>
<div class="row arquivo_upload">
   <div class="col-md-6" >
       <input>
   </div>
   <div class="col-md-6 ">
       <input>
   </div>
</div>
<div id="row-clone"></div>

Você deve fazer log-in para responder a esta pergunta.