delete rows from a table from dynamic form with javascript

[insoniorso]

I want to remove any rows from a table I have created using a dynamic form, so the rows of the table can be increased automatically when clicked on the button "add". and I want to remove any rows from the table. to remove the line when the number of rows is only one, the key does not appear, but when the number of rows is more than one then it would appear the delete button of any row. I've made the html and javascript.\[code\] <table class="table table-striped area-table tabel-form-makanan"> <thead> <tr> <th>Nama Makanan</th> <th>Jenis Makanan</th> <th>Harga Makanan</th> </tr> </thead> <tbody> <tr> <td> <input type="text" name="nama-makanan[]" style="height: 30px; width: 300px;" class="nama-makanan" placeholder="ketikkan nama makanan"/> <input type="hidden" name="id-makanan[]" class="id-makanan"/> </td> <td> <input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 300px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/> </td> <td> <input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 300px;" class="harga-makanan" placeholder="harga satuan makanan"/> </td> </tr> </tbody> </table> <button class="btn tombol-reset-makanan" style="float: right;">Reset</button> <button class="btn btn-primary tombol-tambah-makanan" type="button" style="float: right; margin-right: 10px;">Tambah</button>\[/code\]and this javascript (jquery)\[code\] $('.tombol-tambah-makanan').on('click', function(){ var tr = '<tr>\n\ <td><input type="text" name="nama-makanan[]" style="height: 30px; width: 300px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\ <td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 300px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\ <td><input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 300px;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\ </tr>'; $("table.tabel-form-makanan tbody").append(tr); }); $('.tombol-reset-makanan').on('click', function(){ $('table.tabel-form-makanan tbody tr:notfirst)').remove(); });\[/code\]how to delete any row of the table with a dynamic form?