I have this code and I want to add delete button in each row of the table but my problem is the table inside the script … I want the delete row each row in the table to delete only row that button show in it
<html>
<div id = "data">
<form id = "person">
<br><br>
Name: <select id = "locapavm" name = "pavlocation" >
<option value="rami">rami</option>
<option value="lara">lara</option>
<option value="ahmed">ahmed</option>
</select>
<br><br>
City: <select id="sevepavm" name="pavseverity">
<option value="">- Severity -</option>
<option value="Low">Low</option>
<option value="Medium"> Medium</option>
<option value="High">High</option>
</select>
<br><br>
<textarea id="planpavm" name="pavplan" ></textarea>
<input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">
<input id = "button" type = "button" value = " Add " onclick = "AddData()">
</form>
</div>
<h3>List Of Persons</h3>
<div id = "tab">
<table id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
<thead>
<tr>
<td>Name</td>
<td>Seve</td>
<td>plan</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</html>
and this is the script
<script>
function AddData(){
var rows = "";
var name = document.getElementById("locapavm").value;
var city = document.getElementById("sevepavm").value;
var plan = document.getElementById("planpavm").value;
rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = "deleterow(id)">Delete</button></td></tr>";
$(rows).appendTo("#list tbody");
}
}
function ResetForm(){
document.getElementById("person").reset();
}
function deleterow(id){
$("#rows-"+id+"").remove();
</script>