delete table row

I have a table like this:

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

I want to use JQuery to install a click handler on the delete buttons such tha开发者_如何学JAVAt it deletes the current row when clicked

Give a class of, for example, "delete" to the delete buttons, then use this:

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

Alternatively, if you can't add the class, you can use the :contains selector:

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

Update (now that the code in the question has completely changed)

Now that you have changed the code in the question to contain only one button instead of two, you don't need to bother adding the class, or using the :contains selector, you can just use the plain old button selector:

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

Try this. As a side not you should not have same id to any dom element on the page.

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

In your markup the tags are not closed properly. E.g the button tag is not closed properly so the selector will not work. Give a unique id or a class name to select the required buttons.

Something like this

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

Using delegate to attach event handler only to table for better performance. This way the click event will be attached only to the table element no matter how many rows it has.

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

You can try soemthing like this:

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

And your jQuery:

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

First off, there's a syntax error in your HTML, and you should a class identifier for easier access to those buttons:

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

Next, here's the jQuery code you need:

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