hapus jquery

saya punya kode Form tabel

<form action="" method="GET" id="form-transaksi">
					<table id='table-transaksi' class="table-responsive" width="100%">
						<tr>
							<th>Kode Item</th>
							<th>Nama Item</th>
							<th>QTY</th>
							<th>Harga Jual</th>
							<th>Jumlah</th>
						</tr>
						<tr id="row1">
							<td><input type="text" autocomplete="off" name="kodeitem1" class="input" id="kodeitem1" style="width: 80px;"></td>
							<td>Kecap Bango </td>
							<td><input type="text" name="qtyitem1" id='qtyitem1' style="width: 25px;"></td>
							<td><input type="text" value="Rp. 20.000" id="harga1" readonly style="width: 100px;"></td>
							<td><span id='totalharga1'></span></td>
							<td><button id='hapus1' class="hapus">Hapus</button></td>
						</tr>
						<tr id="row2">
							<td><input type="text" autocomplete="off" name="kodeitem2" class="input" id="kodeitem2" style="width: 80px;"></td>
							<td>Kecap Bango</td>
							<td><input type="text" name="qtyitem2" id="qtyitem2" style="width: 25px;"></td>
							<td><input type="text" value="Rp. 20.000" id="harga2" readonly style="width: 100px;"></td>
							<td><span id="totalharga2"></span></td>
							<td><button id="hapus2" class="hapus">Hapus</button></td>
						</tr>

					</table>

					<button id="tambah">Tambah</button>
					<button id="pending">pending</button>
					<button id="simpan">simpan</button>
				</form>

Jquery nya

$('.hapus').on('click', function(e){
	e.preventDefault(e);
	var id = ($(this).attr('id'));
	var nilai = hanya_angka(id);
	$("#row"+nilai).remove();
});

$('#tambah').on('click', function(e){
	e.preventDefault(e);
	// alert('tambah');
	var nilai = jumlah_row('#table-transaksi tr');
	$('#table-transaksi').append('<tr id="row'+nilai+'"><td><input type="text" autocomplete="off" name="kodeitem'+nilai+'" class="input" id="kodeitem'+nilai+'" style="width: 80px;"></td>'
							+'<td>Kecap Bango</td>'
							+'<td><input type="text" name="qtyitem'+nilai+'" id="qtyitem'+nilai+'" style="width: 25px;"></td>'
							+'<td><input type="text" value="Rp. 20.000" id="harga'+nilai+'" readonly style="width: 100px;"></td>'
							+'<td><span id="totalharga'+nilai+'"></span></td>'
							+'<td><button id="hapus'+nilai+'" class="hapus">Hapus</button></td></tr>');

});

saya mau nanya, td yang dihasilkan dari jquery itu tidak bisa kehapus yaa, malah melakukan proses get. sedangkan kalau html yang saya buat pertama dapat terhapus. mohon pencerahan nya. terima kasih