1

Queria a ajuda para conseguir apagar uma linha do meu formulário com javascript. Estou conseguindo duplicá-la, porém não removê-la.

$(document).ready(function(){ 
	var clone_step1 = $("#step1").find(".duplicar-presencial").html(); // cópia da div com os inputs
	$(document).on("click", "#add-presencial", function(e){
	$("#step1")
	.find(".duplicar-presencial")
	.append(clone_step1); // insere nova linha
	});
});
.margin-t30 {
    margin-top: 30px;
}
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<form class="formulario" role="form">
    <div class="tab-content">
        <div class="tab-pane active" role="tabpanel" id="step1">
            <div class="duplicar-presencial">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="local-encontpresen">Local:</label>
                            <input type="text" class="form-control" name="local-encontpresen[]" id="local-encontpresen">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="data-encontpresen">Data:</label>
                            <input type="date" class="form-control" name="data-encontpresen[]" id="data-encontpresen">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="tipo-avl-encontpresen">Tipo de Avaliação:</label>
                            <select id="tipo-avl-encontpresen" class="form-control">
                        <option hidden="true">Selecione</option>
                        <option>Prova tradicional</option>
                        <option>Prova via Moodle</option>
                    </select>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <!--button class="btn btn-default btn-sm largura100">Adicionar</button-->
                            <button class="btn btn-default margin-t30" type="button" id="del-presencial" >Remover</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group">
                    <div class="col-md-5">
                        <button class="btn btn-default" id="add-presencial" type="button">Adicionar outro encontro presencial</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

1 Resposta 1

2

Clone a div desta forma para pegar o elemento todo, e não apenas o HTML interno:

var clone_step1 = $("#step1").find(".duplicar-presencial")[0].outerHTML;

Troque os ids dos botões por classes, senão vai conflitar vários elementos com o mesmo id. Depois você cria um evento click para selecionar o ancestral .duplicar-presencial mais próximo do botão "remover" clicado para removê-lo:

$(document).ready(function(){ 
   // cópia da div com os inputs
   var clone_step1 = $("#step1").find(".duplicar-presencial")[0].outerHTML;
   $(document).on("click", ".add-presencial", function(e){
      $("#step1")
      .append(clone_step1); // insere nova linha
   });

   $(document).on("click", ".del-presencial", function(){
      $(this)
      .closest(".duplicar-presencial")
      .remove();
   });
});
.margin-t30 {
    margin-top: 30px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<form class="formulario" role="form">
    <div class="tab-content">
        <div class="tab-pane active" role="tabpanel" id="step1">
            <div class="duplicar-presencial">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="local-encontpresen">Local:</label>
                            <input type="text" class="form-control" name="local-encontpresen[]" id="local-encontpresen">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="data-encontpresen">Data:</label>
                            <input type="date" class="form-control" name="data-encontpresen[]" id="data-encontpresen">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="tipo-avl-encontpresen">Tipo de Avaliação:</label>
                            <select id="tipo-avl-encontpresen" class="form-control">
                        <option hidden="true">Selecione</option>
                        <option>Prova tradicional</option>
                        <option>Prova via Moodle</option>
                    </select>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <!--button class="btn btn-default btn-sm largura100">Adicionar</button-->
                            <button class="btn btn-default margin-t30 del-presencial" type="button" >Remover</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group">
                    <div class="col-md-5">
                        <button class="btn btn-default add-presencial" type="button">Adicionar outro encontro presencial</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

4
  • 1
    Vc é bom mesmo, ein? Segunda vez que resolve meu problema. ShoW!!!!! Obg!
    – Ennahpets
    4/07/2018 às 22:23
  • 1
    Blz... só tem um problema ainda que estou resolvendo pra ficar melhor. É porque vc não está duplicando a div .duplicar-presencial, apenas o HTML.... dauqi a pouco atualizo a resposta.
    – Sam
    4/07/2018 às 22:23
  • 1
    Resposta atualizada ;)
    – Sam
    4/07/2018 às 22:28
  • Obg novamente pela ajuda.
    – Ennahpets
    4/07/2018 às 23:06

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .