前端点击删除按钮删除当前行
时间: 2023-09-09 19:14:40 浏览: 90
好的,需要了解你的前端页面是用什么技术实现的。如果你使用的是Vue.js或React.js等现代前端框架,可以通过绑定事件监听器来实现删除功能。在点击删除按钮时,可以触发事件处理函数,通过操作数据模型来删除当前行。
如果你使用的是传统的HTML/CSS/JavaScript技术实现前端页面,可以在删除按钮上绑定点击事件监听器,通过DOM操作找到当前行的元素并删除掉。具体实现方式可以参考以下代码:
```html
<table id="myTable">
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
<tr>
<td>行3列1</td>
<td>行3列2</td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
</table>
<script>
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
```
在这个例子中,我们给每一行的删除按钮绑定了一个点击事件监听器,并在事件处理函数中通过`parentNode`属性访问到当前行的元素,然后使用`removeChild`方法将其从DOM树中删除。