Javascript 单击“表行删除”按钮后删除表行
解决方案可以使用jQuery，也可以是纯JavaScript 我想在用户单击表行单元格中包含的相应按钮后删除表行，例如：Javascript 单击“表行删除”按钮后删除表行,javascript,jquery,html-table,row,Javascript,Jquery,Html Table,Row,解决方案可以使用jQuery，也可以是纯JavaScript 我想在用户单击表行单元格中包含的相应按钮后删除表行，例如： <script> function SomeDeleteRowFunction() { //no clue what to put here? } </script> <table> <tr> <td><input type="button" value="Delete Row" onc
<script>
function SomeDeleteRowFunction() {
//no clue what to put here?
}
</script>
<table>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
</table>
函数SomeDeleteRowFunction（）{
//不知道该在这里放什么？
}
单击onclick$('table').on('click', 'input[type="button"]', function(e){
$(this).closest('tr').remove()
})
您可以这样做：
<script>
function SomeDeleteRowFunction(o) {
//no clue what to put here?
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
</script>
<table>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
</table>
函数SomeDeleteRowFunction（o）{
//不知道该在这里放什么？
var p=o.parentNode.parentNode；
p、 parentNode.removeChild（p）；
}
<table>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
</table>
function SomeDeleteRowFunction(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
<table id="myTable">
<tr>
<th width="30%" style="color:red;">ID</th>
<th width="25%" style="color:red;">Name</th>
<th width="25%" style="color:red;">Age</th>
<th width="1%"></th>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-001</td>
<td width="25%" style="color:red;">Ben</td>
<td width="25%" style="color:red;">25</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-002</td>
<td width="25%" style="color:red;">Anderson</td>
<td width="25%" style="color:red;">47</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-003</td>
<td width="25%" style="color:red;">Rocky</td>
<td width="25%" style="color:red;">32</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-004</td>
<td width="25%" style="color:red;">Lee</td>
<td width="25%" style="color:red;">15</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
我使用纯Javascript在上创建了垃圾箱：
<table>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
</table>
function SomeDeleteRowFunction(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
<table id="myTable">
<tr>
<th width="30%" style="color:red;">ID</th>
<th width="25%" style="color:red;">Name</th>
<th width="25%" style="color:red;">Age</th>
<th width="1%"></th>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-001</td>
<td width="25%" style="color:red;">Ben</td>
<td width="25%" style="color:red;">25</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-002</td>
<td width="25%" style="color:red;">Anderson</td>
<td width="25%" style="color:red;">47</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-003</td>
<td width="25%" style="color:red;">Rocky</td>
<td width="25%" style="color:red;">32</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-004</td>
<td width="25%" style="color:red;">Lee</td>
<td width="25%" style="color:red;">15</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
传递给SomeDeleteRowFunction（）
：
正如@gaurang171所提到的，我们可以使用.remoset（）返回第一个祖先，或者最接近我们的删除按钮，然后使用.remove（）删除它
这就是我们如何使用jqueryclick事件来实现它，而不是使用JavaScript onclick
HTML:
<table>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
</table>
function SomeDeleteRowFunction(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
<table id="myTable">
<tr>
<th width="30%" style="color:red;">ID</th>
<th width="25%" style="color:red;">Name</th>
<th width="25%" style="color:red;">Age</th>
<th width="1%"></th>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-001</td>
<td width="25%" style="color:red;">Ben</td>
<td width="25%" style="color:red;">25</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-002</td>
<td width="25%" style="color:red;">Anderson</td>
<td width="25%" style="color:red;">47</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-003</td>
<td width="25%" style="color:red;">Rocky</td>
<td width="25%" style="color:red;">32</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-004</td>
<td width="25%" style="color:red;">Lee</td>
<td width="25%" style="color:red;">15</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
请尝试JSFIDLE:。它不起作用，我应该让您知道我正在动态地添加我的表行$（'.mytable tr:last'）。之前（………这可能与此有关吗？@like-a-trainer是的，你应该委派活动，尝试更新的答案。非常适合这样简单的任务。@Siren我很确定这可能是这样做的！谢谢你，你是否有一些链接可以解释你的父节点
（s）链？我想正确理解你所做的“计算”。谢谢你，我无法摆脱它。是的，我喜欢这个事实