CODEWITHSUNDEEP
javascriptjquery
Dónal
Dónal

Reputation: 187399

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 that it deletes the current row when clicked

Upvotes: 0

Views: 335

Answers (4)

Ron DeFreitas
Ron DeFreitas

Reputation: 657

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();    
    });
});

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

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();
});

Upvotes: 1

James Allardice
James Allardice

Reputation: 166041

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();  
});

Upvotes: 5

James Johnson
James Johnson

Reputation: 46067

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();
});

Upvotes: 0

Related Questions