How delete a html table row using javascript?

Question

I want to delete a row when i click the glyphicon-trash. I tried many ways but still cant get row index properly.

<table class="table table-bordered" id="table_GemList">
<thead>
  <col style="width: 25%">
  <col style="width: 25%">
  <col style="width: 25%">
  <col style="width: 25%">
</thead>
<tbody id="GemListBody">
<tr>
  <td>Oval</td>
  <td>Red</td>
  <td>2.23</td>
  <td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
<tr>
  <td>Box</td>
  <td>Pink</td>
  <td>2.23</td>
  <td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</tbody>
</table>

---------- My code

 $(document).on("click", ".glyphicon-trash", function () {

        var d = $(this).parentNode.parentNode.rowIndex;
        document.getElementById("table_GemList").deleteRow(d);

});

Ram · Accepted Answer · 2015-07-17 11:08:07Z

3

$(this) returns a jQuery object. You can't directly read the properties of the collection's items that way. In fact you shouldn't wrap the element with the jQuery constructor as you don't want to use the jQuery APIs.

var d = this.parentNode.parentNode.rowIndex;

Since you are using jQuery, you can simply use the closest and remove methods.

$(this).closest('tr').remove();

answered Jul 17, 2015 at 11:08

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

Nikhil Aggarwal · Accepted Answer · 2015-07-17 11:07:22Z

2

You need to update

var d = $(this).parentNode.parentNode.rowIndex;
document.getElementById("table_GemList").deleteRow(d);

to

$(this).closest("tr").remove();

For reference on closest() - https://api.jquery.com/closest/

For reference on remove() - https://api.jquery.com/remove/

answered Jul 17, 2015 at 11:07

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Comments

Negom · Accepted Answer · 2015-07-17 11:07:25Z

0

Maybe this helps....

 $(document).on("click", ".glyphicon-trash", function ()
 {
     $(this).closest("tr").remove(); // remove row
 });

answered Jul 17, 2015 at 11:07

Negom

3181 silver badge7 bronze badges

Comments

Mario Araque · Accepted Answer · 2015-07-17 11:07:33Z

0

This should works.

$(document).on("click", ".glyphicon-trash", function () {
  $(this).parents('tr:first').remove();
});

answered Jul 17, 2015 at 11:07

Mario Araque

4,5723 gold badges17 silver badges25 bronze badges

Comments

Ripun · Accepted Answer · 2015-07-17 11:14:26Z

0

you can simply delete the parent in which trash icons is there by below jquery code

 $(document).on("click", ".glyphicon-trash", function (){
 $(this).parent().parent().remove(); // remove row

});

answered Jul 17, 2015 at 11:14

Ripun

2105 silver badges16 bronze badges

Collectives™ on Stack Overflow

How delete a html table row using javascript?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related