如何运用表单元素将成绩录入然后再点击删除，类似下面这个内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
margin: 100px auto;
width: 300px;
}
th{
border: 1px solid black;
}
td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var tb = document.querySelector('tbody')
function CreateItem(id,name,scroe){
this.id = id
this.name = name
this.scroe = scroe
this.render = function(){
// 把数据插入到表格
var row = document.createElement('tr')
//tb.insertBefore()
// 写入id
var td = document.createElement('td')
td.innerHTML = this.id
row.appendChild(td)
// 写入姓名
td = document.createElement('td')
td.innerHTML = this.name
row.appendChild(td)
// 写入分数
td = document.createElement('td')
td.innerHTML = this.scroe
row.appendChild(td)
// 操作
td = document.createElement('td')
var a = document.createElement('a')
a.innerHTML = "删除"
a.href = '#'
a.onclick = function(){
tb.removeChild(row)
}
td.appendChild(a)
row.appendChild(td)
tb.appendChild(row)
}
}
var item = new CreateItem(20201001,"张飞",100)
item.render()
item = new CreateItem(20201001,"赵云",100)
item.render()
item = new CreateItem(20201001,"刘备",100)
item.render()
item = new CreateItem(20201001,"乔丹",100)
item.render()
</script>
</body>
</html>
