Remove all dynamically added form fields on form reset?

[Presto-X]

Hello everyone,

 

I have just started learn javascript and jquery, my programing background is in html, css and php fun times

 

Any ways, I have a form that I am dynamically adding form fields to and then submitting an email, this all works great, but what I want to do is if the user clicks the reset button remove ALL of the dynamically added fields, how would I go about this, please see my code below.

 

Note I have PHP mixed in with my javascript

function addFormField(){
var id = document.getElementById("id").value;
$("#divTxt").append('<div id="row' + id + '" class="field"><input type="text" name="fname[]" id="fname' + id + '" class="input" value="' + id + ' <?PHP echo FULL_NAME; ?>" onfocus="if(this.value==\'<?PHP echo FULL_NAME; ?>\'){this.value=\'\'};" onblur="if(this.value==\'\'){this.value=\'<?PHP echo FULL_NAME; ?>\'};" /> <input type="text" name="femail[]" id="femail' + id + '" class="input email" value="<?PHP echo EMAIL_ADDRESS; ?>" onfocus="if(this.value==\'<?PHP echo EMAIL_ADDRESS; ?>\'){this.value=\'\'};" onblur="if(this.value==\'\'){this.value=\'<?PHP echo EMAIL_ADDRESS; ?>\'};" /> <a href="return false;" onClick="$(this.parentNode).remove(); return false;" class="remove"><img src="images/remove.png" alt="" border="0" /></a><br clear="all" /></div>');
id = (id - 1) + 2;
document.getElementById("id").value = id;
}
function removeFormField(id){
$(id).remove();
}

 

and here is my reset button

<input type="reset" name="reset" id="reset" value="" class="reset" />

[rajivgonsalves]

you will have to add something to identify it I added a addedfield class

 

function addFormField(){
   var id = document.getElementById("id").value;
   $("#divTxt").append('<div id="row' + id + '" class="field addedfield"><input type="text" name="fname[]" id="fname' + id + '" class="input" value="' + id + ' <?PHP echo FULL_NAME; ?>" onfocus="if(this.value==\'<?PHP echo FULL_NAME; ?>\'){this.value=\'\'};" onblur="if(this.value==\'\'){this.value=\'<?PHP echo FULL_NAME; ?>\'};" /> <input type="text" name="femail[]" id="femail' + id + '" class="input email" value="<?PHP echo EMAIL_ADDRESS; ?>" onfocus="if(this.value==\'<?PHP echo EMAIL_ADDRESS; ?>\'){this.value=\'\'};" onblur="if(this.value==\'\'){this.value=\'<?PHP echo EMAIL_ADDRESS; ?>\'};" /> <a href="return false;" onClick="$(this.parentNode).remove(); return false;" class="remove"><img src="images/remove.png" alt="" border="0" /></a><br clear="all" /></div>');
   id = (id - 1) + 2;
   document.getElementById("id").value = id;
}
function removeFormField(id){
   $('.addedfield').remove();
}

[Presto-X]

That works great, thanks so much for the help, I added the following to my reset button and I was good to go:

onclick="removeFormField();"