La primera eliminación producida funciona bien cuando se hace clic en "agregar más", pero del elemento producido después elimina todo lo presente en la página. ¿Puede alguien ayudarme, tal vez algo esté mal con ele , no tengo mucha experiencia con JS?
Pasos para reproducir :
Haga clic en agregar más y luego en el siguiente agregar más que se creó al hacer clic en el anterior agregar más.
haga clic en el último del
Elimina todo en lugar de eliminar ese mismo DIV
$(function() { $(".btn-copy").on('click', function() { var ele = $(this).closest('.example-2').clone(true); ele.find('input').val('') if (ele.find('button').length<2) { let btn = document.createElement("button"); btn.innerHTML = "Delete"; btn.onclick = (e) => { e.preventDefault() ele.remove() } ele[0].appendChild(btn); } $(this).closest('.example-2').after(ele); }) }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header"> <h5 class="card-title">Add Class</h5> </div> <div class="card-body"> <form action="#"> <div class="example-2 form-group row"> <!--<label class="col-form-label col-md-2">Input Addons</label>--> <div class="col-xs-2"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Class Name</span> </div> <input class="form-control" type="text"> <div class="input-group-append"> <button class="btn-copy btn btn-primary" type="button">Add More</button> </div> </div> </div> </div> <div class="form-group row"> <div class="col-xs-2"> <button class="btn btn-primary" type="button">Submit</button> </div> </div> </form> </div> </div> </div> </div>El problema estaba en el uso de .clone()
Estaba clonando el último elemento clonado que lo obligó a crear una declaración if para evitar crear más de un botón de eliminación. Pero eso tampoco le permitió ejecutar lo que estaba dentro de la declaración if después de clonar una cierta cantidad de nodos.
Tampoco podría usar la variable btn fuera de esa declaración if.
La solución es clonar siempre el primer elemento del example-2 para que podamos saltear el uso de la declaración if y permitir que la variable btn se use libremente.
Agregué un div #wrapper adicional para usar find('div').first() para que el mismo elemento del example-2 se pueda copiar cada vez.
$(function() { $(".btn-copy").on('click', function() { var ele = $('#wrapper').find('div').first().clone(true); ele.find('input').val(''); let btn = document.createElement("button"); btn.innerHTML = "Delete"; ele[0].appendChild(btn); btn.onclick = (e) => { ele.remove() }; $(this).closest('.example-2').after(ele); }) }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div class="example-2 form-group row" style="margin-top:15px"> <div class="col-xs-2"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Class Name</span> </div> <input class="form-control" type="text"> <div class="input-group-append"> <button class="btn-copy btn btn-primary" type="button">Add More</button> </div> </div> </div> </div> <div class="form-group row"> <div class="col-xs-2"> <button class="btn btn-primary" type="button" style="margin-top:30px">Submit</button> </div> </div> </div>