hello im newbie at javascript and jquery. i want to make a dynamical textbox using javascript which can add and remove a row. when i press add button, it works well. but when i pressed delete, it deleted all my table.
here is my javascript function and my php code:
<script type="text/javascript">
function addProg(){
document.getElementById("add_prog").innerHTML += "<tr><td><input type='date' class='form-control' name='tanggal[]'></td><td><input type='number' class='form-control' name='kuota[]'></td><td><input type='time' class='form-control' name='jam_mulai[]'></td><td><input type='button' class='btn btn-danger' onclick='hapus()' value='Hapus'></tr>";
}
function hapus()
{
var x = document.getElementById("add_prog");
x.remove(x.tr);
}
</script>
<div class="container">
<center><h3>Form Pendaftaran
</h3><center><br>
<table class="table table-bordered">
<thead><tr>
<td> a </td>
<td> b </td>
<td> c </td>
</tr></thead>
<tbody id="add_prog">
<tr id="1">
<td><input type="date" class="form-control" name="tanggal[]"></td>
<td><input type="number" class="form-control" name="kuota[]"></td>
<td><input type="time" class="form-control" name="jam_mulai[]"></td>
<td><input type="button" class="btn btn-danger" onclick="hapus()" value="Hapus"></td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-default" onclick="addProg()" value="Tambah">
i dont know how to delete spesific index that i want to deleted and write it in my script. can someone just please tell me how to do it?