Remove Div on which the element is included

Question

Remove Div on which the element is included

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

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

Form parsed:

Functionsyouaddandremove:

functionaddNovosArquivosUpload(){$('.arquivoUpload').fileinput('destroy');varclone=$('.arquivo_upload:first').clone();varcloneInput=clone.find('input');varindex=$('.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('<divclass="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>

javascript jquery yii2

asked by anonymous 23.11.2018 / 14:57

2 answers

2

Try this:

Change method:

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

And in the line that creates the delete button, change

onclick="removerDivCloneArquivo();"

To:

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

23.11.2018 / 17:00

How to create a column with specific conditions? What does "Runtime" mean? [duplicate]

score 3 · Accepted Answer

Change the function to:

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

Add in onclick o this when calling function:

onclick="removerdivCloneArquivo(this)"

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

The e returns the element that fired the event (in this case, onclick ) sent by this . You only have to get the first ancestor (div-father, grandfather, great-grandfather, great-grandparent, etc.) with 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><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>
</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>