Remove one element at a time with Jquery

Question

Remove one element at a time with Jquery

Navigation

#1 by (2 votes)

3

I'm using the Clone function of jquery to be able to replicate a div . However, removing these elements, regardless of the quantity that has been replicated, always removes the div by complete. I need it removed line by line.

Form Code:

<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();
});

javascript jquery

asked by anonymous 19.11.2018 / 15:24

1 answer

Error When Adding Controller in ASP.NET MVC ajax with jquery - data format

score 2 · Accepted Answer

Cloning the <div class="row arquivo_upload" id="uploadArquivoId"> element will double the id="uploadArquivoId" , which makes your HTML incorrect because a id must be unique on the page.

Select the element by class .arquivo_upload and only the first with :first :

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

Remove the id that will not be more useful, just getting:

<div class="row arquivo_upload">

In the event to remove the elements, use the :last selector for the last cloned element. When using $('#row-clone').remove(); you are removing the div that receives the whole clones:

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

See an example:

$('#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><scriptsrc="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>