<script type="text/javascript"> i=1; function cloneDFLStep(){ i++; var appendThis = '<hr><div id="formId" class="form-group"><label for="fa_title">Step '+i+'</label><input type="text" class="form-control" id="fa_title[]" name="fa_title[]" placeholder="Enter Step Title ['+i+']"><br><textarea class="form-control" id="f_steps" name="f_steps[]" placeholder="Steps Description (Include All Steps Taken On Analysis) ['+i+']" rows="5"></textarea><br><textarea class="form-control" id="s_remarks" name="s_remarks[]" placeholder="Remarks (Add Any Remarks On Steps Taken) ['+i+']" rows="3"></textarea><hr><input class="minusbtn btn btn-sm btn-warning" type="button" name="removef" value="Delete Step ['+i+']"></div>'; $('.appendRow').append(appendThis); } </script>Este código agrega un nuevo formulario cada vez que se hace clic en el botón. ¿Cómo creo una función para eliminar los nuevos formularios adjuntos con el botón creado?
Envuelva la cadena que almacenó en appendThis con $() , de modo que tenga un conjunto jQuery de elementos (no representados) en los que pueda operar.
Vincule un evento de clic a la clase minusbtn de su botón de eliminación creado
Elimine todos los elementos renderizados previamente (=> almacenados en appendThis ) dentro del evento de clic.
Ver este violín: https://jsfiddle.net/z9d8nphm/
Código extendido:
<script type="text/javascript"> i=1; function cloneDFLStep(){ i++; // ATTENTION. STRING WRAPPED HERE: var $appendThis = $(...) var $appendThis = $('<hr><div id="formId" class="form-group"><label for="fa_title">Step '+i+'</label><input type="text" class="form-control" id="fa_title[]" name="fa_title[]" placeholder="Enter Step Title ['+i+']"><br><textarea class="form-control" id="f_steps" name="f_steps[]" placeholder="Steps Description (Include All Steps Taken On Analysis) ['+i+']" rows="5"></textarea><br><textarea class="form-control" id="s_remarks" name="s_remarks[]" placeholder="Remarks (Add Any Remarks On Steps Taken) ['+i+']" rows="3"></textarea><hr><input class="minusbtn btn btn-sm btn-warning" type="button" name="removef" value="Delete Step ['+i+']"></div>' ); $appendThis.find( '.minusbtn' ).click( function( event ) { event.preventDefault(); $appendThis.remove(); }); $('.appendRow').append($appendThis); } </script><div class="appendRow"></div> <button onclick="cloneDFLStep()">cloneDFLStep</button> <script type="text/javascript"> i=1; function cloneDFLStep(){ i++; var $appendThis = $('<hr><div id="formId" class="form-group"><label for="fa_title">Step '+i+'</label><input type="text" class="form-control" id="fa_title[]" name="fa_title[]" placeholder="Enter Step Title ['+i+']"><br><textarea class="form-control" id="f_steps" name="f_steps[]" placeholder="Steps Description (Include All Steps Taken On Analysis) ['+i+']" rows="5"></textarea><br><textarea class="form-control" id="s_remarks" name="s_remarks[]" placeholder="Remarks (Add Any Remarks On Steps Taken) ['+i+']" rows="3"></textarea><hr><input class="btn btn-sm btn-warning" id="removeForm" type="button" name="removef" value="Delete Step ['+i+']"></div>' ); $appendThis.children( '#removeForm' ).click(function(){ $appendThis.remove(); }) $('.appendRow').append($appendThis); } </script>