Delete row table using jQuery

Question

Suppose I have a table like this

id  name    address     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 ?

Do you want to remove the row from the Database table, or the HTML table? Or both? — Douwe Maan
– Douwe Maan, Commented Jan 20, 2010 at 10:53
@Douwe Would you know how to have this delete the html and database table? I just came across this question when searching for an answer for the same sort of problem. — Trevor Arjeski
– Trevor Arjeski, Commented Apr 12, 2011 at 16:02

Philippe Leybaert · Accepted Answer · 2010-01-20 11:05:45Z

18

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

edited Jan 20, 2010 at 11:05

answered Jan 20, 2010 at 11:00

Philippe Leybaert

172k33 gold badges213 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

psychotik Over a year ago

nice... i didn't know about closest

psychotik · Accepted Answer · 2010-01-20 11:08:06Z

1

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.

edited Jan 20, 2010 at 11:08

answered Jan 20, 2010 at 10:58

psychotik

39.2k35 gold badges104 silver badges136 bronze badges

4 Comments

Adi Sembiring Over a year ago

according to you, which one is the best practice. I use dummy id like $("#row_" + thisId).remove(); or I use closest selector like $(this).closest("tr").remove(); // remove row

Philippe Leybaert Over a year ago

While this will work, I think this solution is a little overkill. It can be done a lot cleaner

Adi Sembiring Over a year ago

why you said that the psychotik answer is overkill ?

Philippe Leybaert Over a year ago

Getting the id first, and then building a string to select the row with a specific id is not very efficient. After all, jQuery offers very nice ways of selecting the parent container(s) of any element

Fellipe · Accepted Answer · 2017-05-22 17:43:17Z

0

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>

edited May 22, 2017 at 17:43

answered May 22, 2017 at 17:01

Fellipe

6016 silver badges8 bronze badges

Collectives™ on Stack Overflow

Delete row table using jQuery

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related