删除包含单击td JQuery的行

Question

我正在尝试管理我的HTML表，添加和删除行。我想要做的是通过单击一个元素()来删除整个行。然而，当单击一个元素时，所有标记的父标记都会被删除。是否要指定单击元素，并仅删除包含该元素的行，具体用于这种类型的可调整表，其中可以添加和删除行。

​

<!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>

​

Answer 1

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

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

工作片段：

​

<!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>

​

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>

​