<script type="text/javascript">
  i=1; 
  function cloneDFLStep(){
    i  ;
    
    var appendThis = '<hr><div id="formId" ><label for="fa_title">Step ' i '</label><input type="text"  id="fa_title[]" name="fa_title[]"  placeholder="Enter Step Title [' i ']"><br><textarea  id="f_steps" name="f_steps[]" placeholder="Steps Description (Include All Steps Taken On Analysis) [' i ']" rows="5"></textarea><br><textarea  id="s_remarks" name="s_remarks[]" placeholder="Remarks (Add Any Remarks On Steps Taken) [' i ']" rows="3"></textarea><hr><input  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? help

CodePudding user response：

1. Wrap the string you stored in appendThis with $(), so you have an jQuery set of (not rendered) elements which you can operate on.

2. Bind a click event to the minusbtn class of your created delete button

3. 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" ><label for="fa_title">Step ' i '</label><input type="text"  id="fa_title[]" name="fa_title[]"  placeholder="Enter Step Title [' i ']"><br><textarea  id="f_steps" name="f_steps[]" placeholder="Steps Description (Include All Steps Taken On Analysis) [' i ']" rows="5"></textarea><br><textarea  id="s_remarks" name="s_remarks[]" placeholder="Remarks (Add Any Remarks On Steps Taken) [' i ']" rows="3"></textarea><hr><input  type="button" name="removef" value="Delete Step [' i ']"></div>' );

    $appendThis.find( '.minusbtn' ).click( function( event ) {

        event.preventDefault();

        $appendThis.remove();
    });

    $('.appendRow').append($appendThis);
  }

</script>

CodePudding user response：

<div ></div>

<button onclick="cloneDFLStep()">cloneDFLStep</button>

<script type="text/javascript">
  i=1; 
  function cloneDFLStep(){
    i  ;
    
    var $appendThis = $('<hr><div id="formId" ><label for="fa_title">Step ' i '</label><input type="text"  id="fa_title[]" name="fa_title[]"  placeholder="Enter Step Title [' i ']"><br><textarea  id="f_steps" name="f_steps[]" placeholder="Steps Description (Include All Steps Taken On Analysis) [' i ']" rows="5"></textarea><br><textarea  id="s_remarks" name="s_remarks[]" placeholder="Remarks (Add Any Remarks On Steps Taken) [' i ']" rows="3"></textarea><hr><input  id="removeForm" type="button" name="removef" value="Delete Step [' i ']"></div>' );
    $appendThis.children( '#removeForm' ).click(function(){ 
   $appendThis.remove();
  })
    $('.appendRow').append($appendThis);

  }

</script>