delete rows from a table from dynamic form with javascript

Question

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.

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

and this javascript (jquery)

    $('.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:not(:first)').remove();
    });

how to delete any row of the table with a dynamic form?

Answer 1

Use on() to delegate click handler for dynamically added elements

$('.tabel-form-makanan').on( 'click', '.deleteButtonClass', function(){

   $(this).closest('tr').remove()
})

Answer 2

try

  $(document).on('click','.deleteButtonClass', function(){
        $('table.tabel-form-makanan tbody tr:not(:first)').remove();
    });

Answer 3

This will allow you to delete any row

http://jsfiddle.net/KRacz/

$("table.tabel-form-makanan tbody").find("button").on('click', function() {
      $(this).parent().parent().remove();
});