Question

我有一张这样的表：

<table>
  <tr>
    <td>foo</td>
    <td><button>delete</delete></td>
  </tr>
  <tr>
    <td>foo</td>
    <td><button>delete</delete></td>
  </tr>
</table>

我想使用JQuery在删除按钮上安装点击处理程序，以便在单击时删除当前行

Answer 1

在删除按钮中输入一个类，例如“删除”，然后使用：

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

或者，如果您无法添加该类，则可以使用:contains选择器：

$("button:contains('delete')").click(function() {
  $(this).closest("tr").remove();  
});

更新（现在问题中的代码已完全更改）

既然您已将问题中的代码更改为仅包含一个按钮而不是两个按钮，则无需添加class或使用:contains选择器，您可以使用普通的旧button选择器：

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

Answer 2

试试这个。作为一方，你不应该对页面上的任何dom元素使用相同的id。

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

在标记中，标记未正确关闭。例如，按钮标签未正确关闭，因此选择器将无法工作。提供唯一的ID或类名以选择所需的按钮。

像这样的东西

 <tr>
    <td>foo</td>
    <td>Some content</td>
    <td><input type="button" class="delete" value="Delete" /></td>
  </tr>

使用delegate仅将事件处理程序附加到表以获得更好的性能。这样，click事件将仅附加到表元素，无论它有多少行。

$("table").delegate("input.delete", "click", function() {
    $(this).closest("tr").remove();
});

Answer 3

您可以尝试这样的事情：

<table>
  <tr>
    <td>row 1, cell 1</td>
    <td><img class="delete" src="del.gif" /></td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td><img class="delete" src="del.gif" /></td>
  </tr>
</table>

你的jQuery：

$('table td img.delete').click(function(){
    $(this).parent().parent().remove();
});

Answer 4

首先，HTML中存在语法错误，您应该有一个类标识符，以便更轻松地访问这些按钮：

<table>
  <tr>
    <td>foo</td>
    <td><button class="delete">delete</button></td>
  </tr>
  <tr>
    <td>foo</td>
    <td><button class="delete">delete</button></td>
  </tr>
</table>

接下来，这是您需要的jQuery代码：

$(function() {
    $('button.delete').click(function(event) {
       event.preventDefault();
       $(this).closest('tr').remove();    
    });
});

删除表格行

4 个答案: