Remove one element at a time with Jquery

Asked

Viewed 242 times

2

I’m using the function Clone jquery to replicate a div. However, when removing these elements, regardless of the amount that has been replicated, the function always removes the div by full. I need it removed row by row.

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 form
  • 1

    When cloning $('#uploadArquivoId') you will repeat the id, which is incorrect.

  • But it is for him that I select the element that I will clone.

  • You can select by class.

  • I tried for class: var clone = $('.Row arquivo_upload'). clone(); But it didn’t work.

1 answer

1


When cloning the element <div class="row arquivo_upload" id="uploadArquivoId"> will be duplicated the id="uploadArquivoId", which makes your HTML incorrect, because a id should 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 be of no further use, just staying:

<div class="row arquivo_upload">

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

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

Take 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>
<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>

Browser other questions tagged javascript jquery form

You are not signed in. Login or sign up in order to post.