Remove Div in which element is included

Question

I have a form, where I do the clone (jQuery) to add new inputs, where I can also remove them. The problem that occurs is: I need to remove the div "chain" where the remove button is. And currently I can only remove the last element.

Specific form:

Functions that adds and removes:

function addNovosArquivosUpload()
 {
$('.arquivoUpload').fileinput('destroy');
var clone = $('.arquivo_upload:first').clone();
var cloneInput = clone.find('input');
var index = $('.arquivo_upload').length;
if(cloneInput.val() !== null){
    cloneInput.val('');
}
clone.attr('id', 'arquivoUploadId')
$(cloneInput[0]).attr('name', 'ArquivoDocumental['+index+'][descricao]')
$(cloneInput[1]).attr('name', 'ArquivoDocumental['+index+'][arquivo_url]')
$(cloneInput[2]).attr('name', 'ArquivoDocumental['+index+'][arquivo_url]')
$(cloneInput[3]).attr('name', 'ArquivoDocumental['+index+'][arquivo_url]')


$('#row-clone').append(clone);
$('.arquivoUpload').fileinput({'language' : 'pt', 'showPreview' : false, 'showUpload' : false, 'removeLabel' : '', 'browseLabel': ''});
$('.arquivo_upload:last').append('<div class="col-md-1"><button type="button" class=" btn btn-sm btn-danger btn-rounded m-t-30 float-right" onclick="removerdivCloneArquivo();"><i class="fa fa-trash"></i></button></div>');

}

function removerdivCloneArquivo(){
  $('#row-clone .arquivo_upload:last').remove();
}

Form:

  <div class="row">
  <button type="button" class="btn btn-info btn-rounded pull-right" onclick="addNovosArquivosUpload();" title="Adicionar mais arquivos">Adicionar</button>
</div>
<div class="row arquivo_upload">
<div class="col-md-6" >
    <?= $form->field($model, '[0]descricao')->textInput(['maxlength' => true]) ?>
</div>
<div class="col-md-5">
    <?= $form->field($model, '[0]arquivo_url')->widget(\kartik\file\FileInput::classname(), [
        'options' => ['multiple' => true, 'class'=>'arquivoUpload'],
        'language' => 'pt',
        'pluginOptions' => [
            'showUpload' => false,
            'showPreview' => false,
            'browseLabel' => '',
            'removeLabel' => '',
        ],
    ])->label('Arquivo') ?>

</div>

Answer 1

Change the function to:

function removerdivCloneArquivo(e){
   if($(".arquivo_upload").length > 1) $(e).closest(".arquivo_upload").remove();
}

Add on to onclick the this when calling the function:

onclick="removerdivCloneArquivo(this)"

The if($(".arquivo_upload").length > 1){ will prevent you from removing all elements, leaving at least 1, otherwise you will no longer be able to clone.

The e returns the element that triggered the event (in this case, the onclick) sent by this. Then you just take the first ancestor (div-father, grandfather, great-grandfather, great-grandfather etc.) with the class .arquivo_upload using .closest().

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

function removerdivCloneArquivo(e){
   if($(".arquivo_upload").length > 1) $(e).closest(".arquivo_upload").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>
</div>
<div class="row arquivo_upload">
   <div class="col-md-4">
       <input>
   </div>
   <div class="col-md-4">
       <input>
   </div>
   <div class="col-md-4">
       <button type="button" onclick="removerdivCloneArquivo(this)">Remover</button>
   </div>
</div>
<div id="row-clone"></div>

Answer 2

Try it like this:

Change the method:

removerDivCloneArquivo(botao) {
    botao.parent().parent().remove();
}

And on the line that creates the delete button, change

onclick="removerDivCloneArquivo();"

for:

onclick="removerDivCloneArquivo($(this));"