Question

我正在尝试管理我的HTML表格，添加和删除行。我想要做的是通过单击元素（）来删除整行。然而，当单击元素时，将删除所有标记的父项。无论如何都要指定单击的元素并仅删除包含该元素的行，专门用于这种类型的可调表，其中可以添加和删除行。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("td").click(function(){
    $("td").parentsUntil("table").remove();
    });
});
</script>
</head>

<body> 
  <table border="1">
    <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td></tr>
    <tr><td>test5</td><td>test6</td><td>test7</td><td>test8</td></tr>
  </table>
</body>

</html>

＆＃13;

Answer 1

您需要遍历单击处理程序中最近的tr元素，然后将其删除。为此，您需要点击元素的jquery对象以及.closest()或.parent()选择器：

$("td").click(function(){
      $(this).closest("tr").remove();
});

工作代码段

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("td").click(function(){
      $(this).closest("tr").remove();
    });
});
</script>
</head>

<body> 
  <table border="1">
    <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td></tr>
    <tr><td>test5</td><td>test6</td><td>test7</td><td>test8</td></tr>
  </table>
</body>

</html>

＆＃13;

Answer 2

是的，有。只需选择该<td>元素的父元素即可;它将是<tr>。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("td").click(function(){
      $(this).parent().remove();
    });
});
</script>
</head>

<body> 
  <table border="1">
    <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td></tr>
    <tr><td>test5</td><td>test6</td><td>test7</td><td>test8</td></tr>
  </table>
</body>

</html>

删除包含单击的td JQuery行

2 个答案: