<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>
This code appends a new form anytime the button is clicked. How Do I create a function to remove the new appended forms with the button created?
Wrap the string you stored in appendThis with $(), so you have an jQuery set of (not rendered) elements which you can operate on.
Bind a click event to the minusbtn class of your created delete button
Delete all previously rendered elements (=> stored in appendThis) inside the click event.
See this Fiddle: https://jsfiddle.net/z9d8nphm/
Extended Code:
<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>