Reset the dynamic form as before

Issue

I have a html coding like this:

<form>
<table class="tabelWhiteJenisPembayaran">
    <tbody>
        <tr>
            <td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" placeholder="Jenis Pembayaran" autocomplete="off" style="margin-bottom: 5px;"/></td>
        </tr>
    </tbody>
</table>
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn" type="reset">Batal</button>
</form>

and I have a JavaScript coding as below:

$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
    var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
    $("table.tabelWhiteJenisPembayaran tbody").append(tr);                  
}); 

If the form is clicked will display a new form, for example I click 3 times in the last form, the total form there are 4 form. I'm wondering is how when I click on the "reset" the number of forms that had been there 4 form into 1 form as before. How to reset to 1 form again. Please help.

Solution

Try This way

$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
    var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
    $("table.tabelWhiteJenisPembayaran tbody").append(tr);                  
}); 

$("[type=reset]").click(function(){
     $('table.tabelWhiteJenisPembayaran tr:not(:first)').remove();
});
​

Working Demo

Answered By - Sibu