palstudent palstudent - 2 months ago 11
Ajax Question

How to delete row from table build in JS

I built a table from JSON object then retrieve it and build table automatically from its content. Then I added a new column contains buttons (using js) to delete each row individually. How I can delete certain row depending on each row id?

table.js

$(document).ready(function (){
var json = [
{
"id": "0",
"firstName":"Ahmed",
"lastName":"Mahmoud",
"Email": "ahmed.m92@gmail.com",
"Phone": "0599547632",
"Type": "Male"},
{
"id": "1",
"firstName":"Mahmoud",
"lastName":"Qasem",
"Email": "m.Qasem80@gmail.com",
"Phone": "0599547632",
"Type" : "Male"},

{
"id": "2",
"firstName":"Lena",
"lastName":"Asaed",
"Email": "lena_ahmed@hotmail.com",
"Phone": "0599547632",
"Type": "Female"}
];
var tr;
var buttonnode= document.createElement('input');
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');

tr.append("<td>" + json[i].id +"</td>");
tr.append("<td >" + json[i].id +"</td>");
tr.append("<td >" + json[i].firstName +"</td>");
tr.append("<td >" + json[i].lastName + "</td>");
tr.append("<td >" + json[i].Email + "</td>");
tr.append("<td >" + json[i].Phone + "</td>");
tr.append("<td >" + json[i].Type + "</td>");
tr.append("<td >"+'<button id="delete" >Delete</button>'+"</td>");
$('table').append(tr);
}
});


enter image description here
This is a snapshot of the table

Answer

I didnt test it, but you could do it like this:

var table = $("table");

for (var i = 0; i < json.length; i++) {
    var row = "<tr id='row-" + i + "'>";
    row += "<td>" + json[i].id +"</td>";
    row += "<td>" + json[i].firstName +"</td>";
    row += "<td>" + json[i].lastName + "</td>";
    row += "<td>" + json[i].Email + "</td>";
    row += "<td>" + json[i].Phone + "</td>";
    row += "<td>" + json[i].Type + "</td>";
    row += "<td><button onClick='deleteRow(" + i +")'>Delete</button></td>";
    row += "</tr>";
    table.append(row);
}

function deleteRow(rowId){
    table.find("td#row-" + rowId).remove();
}

For larger tables i highly recommend using a framework like AngularJS which makes it easy to keep your markup simple and implement functions to modify your table.

// edit: if you want to use the original ID of your JSON you can just replace the counter with the JSON objects ID
var row = "<tr id='row-" + json[i].id + "'>";

Update: The jQuery way without "onclick":

$(document).ready(function(){
  var table = $("table");

  for (var i = 0; i < json.length; i++) {
      var row = "<tr id='row-" + i + "'>";
      row += "<td>" + json[i].id +"</td>";
      row += "<td>" + json[i].firstName +"</td>";
      row += "<td>" + json[i].lastName + "</td>";
      row += "<td>" + json[i].Email + "</td>";
      row += "<td>" + json[i].Phone + "</td>";
      row += "<td>" + json[i].Type + "</td>";
      row += "<td><button class='remove-button' data-id='" + i + "'>Delete</button></td>";
      row += "</tr>";
      table.append(row);
  };

  $(".remove-button").click(function(){
    var rowId = $(this).data("id");
    $("#row-" + rowId).remove();
  });
});

JSFiddle