javascript - 行削除機能がうまく動作しない

Question

動的フォームを含むテーブルを作成したので、追加ボタンをクリックすると、各行に同じフォームの新しい行が表示されます。そしてフォームクリアのスイッチも入れたのですが、なかなかうまくいきません。その行を削除するアクションには他の関数があるためです。私が作った次のコーディング。

html:

<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: 280px;" 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: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/>
            </td>
            <td>
                <input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/>
            </td>
            <td>
                <a class="btn hapus-baris-makanan" style="display: none;"><i class="icon-remove"></i></a>
            </td>
        </tr>
    </tbody>
</table>
<button class="btn btn-primary tombol-tambah-makanan" type="button" style="float: right; margin-right: 10px;">Tambah</button>

動的フォームの JavaScript:

$('.tombol-tambah-makanan').on('click', function(){
    var tr = '<tr>\n\
                <td><input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" 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: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\
                <td><input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\
                <td><a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a></td>\n\
            </tr>';
    $("table.tabel-form-makanan tbody").append(tr);                  
});

削除フォームの JavaScript:

$('.tabel-form-makanan').on( 'click', '.hapus-baris-makanan', function(){
    var parent = $(this).parents('tr');
    var harga = $('.harga-makanan', parent).val();
    pengurangan_pesanan(harga);
    $(this).closest('tr').remove();
});

その他の JavaScript:

function pengurangan_pesanan(price) {
        if (subtotal > 0) {
            var kembali = 0;
            subtotal -= parseFloat(price);
            $('.subtotal').val(subtotal);
            if (cek_bayar != isNaN || cek_bayar != 0) {
                kembali = cek_bayar - subtotal;
                $('.kembali').val(kembali);
            }
        }
}

この問題の解決策はありますか。本当に必要です。ありがとうございました

*デモ: http://jsfiddle.net/daniwarrior/ANfFe/1/