Remove dynamic inputs

Question

Remove dynamic inputs

Navigation

#1 by (2 votes)

1

I wanted the help to be able to delete a line from my form with javascript. I'm able to duplicate it, but do not remove it .

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

javascript html jquery css twitter-bootstrap

asked by anonymous 04.07.2018 / 23:37

1 answer

Thread independent from the result How to audit records by saving changes in JSON

score 2 · Accepted Answer

Clone the div in this way to get the whole element, not just the internal HTML:

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

Change the id s of the buttons by classes, otherwise it will conflict several elements with the same id . Then you create a click event to select the ancestor .duplicar-presencial closest to the "remove" button clicked to remove it:

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