Remove Row from table using jQuery

Question

I want to generate a table with content of the array with an option to delete the rows. I got a basic block of code that I think that should work but it's not doing anything and it's giving me "Uncaught SyntaxError: Unexpected token }" error.

function newtest2() {
  $(this).parents('tr').remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");

  }
}

#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button onclick="newtest()">TEST</button>

Satpal · Accepted Answer · 2018-04-17 13:19:34Z

this doesn't refers to TABLE/BUTTON in the newtest2() method, it refers to window object thus the code didn't work.

Accept the this argument in function and use it

function newtest2(elem) {
   $(elem).closest('tr').remove();
}

function newtest2(elem) {
  $(elem).closest('tr').remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
  }
}

#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">
</table>
<br>
<button onclick="newtest()">TEST</button>

I would recommend, you to use unobtrusive event handler use .on() to attach event handler with elements instead of ugly inline event handler.

Using .on() method with Event Delegation approach to attach event handler for dynamic elements (Remove Button).

$("#table1").on('click', '.remove', function() {
  $(this).closest('tr').remove();
})

$("#create").on('click', function() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button class='remove' type='button'>Remove</button>" + "</td></tr>");

  }
})

#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button id="create">TEST</button>

ArcherBoy27 · Accepted Answer · 2018-04-17 13:11:42Z

2

To remove a row on click of the button:

$('#table_id').on('click', '#remButton', function(){
    var indexRow = this.parentNode.parentNode.rowIndex;
    document.getElementById("table_ID").deleteRow(indexRow);
});

answered Apr 17, 2018 at 13:11

ArcherBoy27

1501 silver badge9 bronze badges

Comments

N. Ivanov · Accepted Answer · 2018-04-17 13:12:51Z

You need to specify an argument in your function, and then you need to get the parent of the parent of the this element, because it is a button, and not the <td>.

Here is a working example. Note there might be a better way of doing this with click events and ids

function newtest2(evt) {
  $(evt).parent().parent().remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");

  }
}

#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button onclick="newtest()">TEST</button>

Eddie · Accepted Answer · 2018-04-17 13:11:28Z

You are passing this on the on HTML - newtest2(this).

On your function, you need to recieve the variable and use it to delete the <tr>

 function newtest2(e) {              //Add e as parameter
      $(e).parents('tr').remove();   //Use the e to delete
 }

Here is the snippet:

function newtest2(e) {
  $(e).parents('tr').remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");

  }
}

#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button onclick="newtest()">TEST</button>

Scaramouche · Accepted Answer · 2018-04-17 13:11:38Z

you can't use $(this) inside your function because it does not refer to the button being clicked.

Since you are including the function inside onclick and passing this as parameter, just use that parameter inside your function, like so

Secondary suggestion: use .closest('tr') instead of .parents('tr'), in case, you know, in the future you might want a table inside a table, ;)

function newtest2(caller) {
  $(caller).closest('tr').remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");

  }
}

#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button onclick="newtest()">TEST</button>

c P2n2k2 · Accepted Answer · 2018-04-17 13:16:26Z

Change parent by closest. Parent is the immediate parent, closest is traversing the dom.
this in the function newttest2 doesn't refer to the button element, just refer to it as a function parameter

function newtest2(el) {
  $(el).closest('tr').remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");

  }
}

#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button onclick="newtest()">TEST</button>

kalai · Accepted Answer · 2018-04-17 13:22:37Z

0

try this

 for (var i = 0; i < name.length; i += 1) {
                        $("#table1").append("<tr id=" + name[i] + "><td>" + name[i] + "</td><td>" + "<button id=" + name[i] + " onclick='newtest2(this.id)'>Remove</button>" + "</td></tr>");
                    }



 function newtest2(id) {
            $('#' + id + '').remove();
        }

answered Apr 17, 2018 at 13:22

kalai

18612 bronze badges

Collectives™ on Stack Overflow

Remove Row from table using jQuery

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related