Delete row table using jQuery

Suppose I have a table like this

id  name    a开发者_JAVA技巧ddress     action
--------------------------------------
s1  n1  a1      delete
s2  n2  a2      delete

Delete is a link for example <a href="http://localhost/student/delete/1">. In the real case I delete the student using ajax. In order to simplify the code, I just alert the link and omit the ajax script. I just wanna know How to delete row from the html document using jquery.

$(document).ready(function() {
$("a").click(function(event) {
    alert("As you can see, the link no longer took you to jquery.com");
        var href = $(this).attr('href');
        alert(href);
        event.preventDefault();
   });
);

I want, After I alert the link the selected row will be remove automatically. Is there any suggestion how to implement this one ?

---

You don't need to call preventDefault(). Simply returning false from the event handler has the same effect.

To remove the row where the <a> link is located, you can call $(this).closest("tr").remove():

$(document).ready(function() {
$("a").click(function(event) {
    alert("As you can see, the link no longer took you to jquery.com");
    var href = $(this).attr('href');
    alert(href);
    $(this).closest("tr").remove(); // remove row
    return false; // prevents default behavior
   });
);

---

Add an id to each <tr> called row_9714 and add an id 9714 to the link. Then in your click event handler call:

var thisId = $(this).attr('id');
$("#row_" + thisId).remove();

Note -- 9714 is just a dummy ID. Just use a unique number here for each row.

---

This example removes rows from a table with JQuery.

$(document).ready(function () {
$("#my_table .remove_row").click(function () {
	$(this).parents("tr:first")[0].remove();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table"  border="1" id="my_table">
   <tbody>
      <tr>
         <td>1</td>
         <td>1</td>
         <td>1</td>
         <td><button type="button" class="remove_row">X</button></td>
      </tr>
      <tr>
         <td>2</td>
         <td>2</td>
         <td>2</td>
         <td><button type="button" class="remove_row">X</button></td>
      </tr>
   </tbody>
</table>