javascript - 像以前一样重置动态表单

Question

我有这样的 html 编码:

<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>

我的 JavaScript 编码如下:

$("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);                  
}); 

如果点击表单会显示一个新的表单，比如我在最后一个表单中点击了3次，总共有4个表单。我想知道当我点击“重置”时，如何将原来的 4 个表单变成 1 个表单。如何再次重置为 1 表单。请帮忙。

Answer 1

试试这个方法

$("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