dynamically delete row in javscript

Question

I am new to javascript, need some help.

I am working on the Add/Remove feature to add and delete data from the table up on input. Add operation is working fine but I am not able to delete the row in the table. I have gone through some of the doc and links but I am not getting.

Can someone help me with it?

Code Snippet:

<!DOCTYPE html>
<html>

<head lang="en">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <style>
    body {
      margin: 85px;
    }
    
    .btn-primary {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <form class="container">
    <div class="form-group">
      <label for="name">Enter Name</label>
      <input type="text" class="form-control" id="firstname" placeholder="Enter Your Name">
    </div>
    <div class="form-group">
      <label for="age">Enter Age</label>
      <input type="text" class="form-control" id="age" placeholder="Age">
    </div>
    <div class="form-group">
      <label for="subject">Enter Subject</label>
      <input type="text" class="form-control" id="stusubject" placeholder="Subject">
    </div>
    <input type="button" onclick="showName()" class="btn btn-primary" value="submit">
  </form>
  <table class="table container mt-5" id="studList">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Subject</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
      </tr>
    </tbody>
  </table>
</body>

</html>
<script>
  var student = [{
      nname: "abc",
      age: 18,
      subject: "eng"
    },
    {
      nname: "red",
      age: 20,
      subject: "math"
    }
  ]

  function showName() {
    var firstName = document.getElementById("firstname").value;
    var age = document.getElementById("age").value;
    var stusubject = document.getElementById("stusubject").value;

    console.log("firstName :", firstName);
    console.log("Age :", age);
    console.log("subject :", stusubject);

    // push the data in array
    var newstud = {
      nname: firstName,
      age: age,
      subject: stusubject,
    }
    student.push(newstud);
    //console.log(newstud);
    console.log(student);

    var table = ' <tr>' +
      '<td>' + firstName + '</td>' +
      '<td>' + age + '</td>' +
      '<td>' + stusubject + '</td>' +
      '<td> <input type="button" onclick="delName(r)"  class="btn btn-primary" value="Delete"></td></td>' +
      '</tr>'
    $(table).appendTo('#studList tbody');
    console.log("table :", table);
  }

  //delete the row onclcik
  function delName(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("studList").deleteRow(i);
  }
  var table = ' <tr>' +
    '<td>' + firstName + '</td>' -
    +'<td>' + age + '</td>' +
    '<td>' + stusubject + '</td>' +
    '</tr>'
  $(table).deleteRow('#studList tbody');
  console.log("table :", table);
</script>

You cant delete a row in jquery like this- $(table).deleteRow('#studList tbody'); insted use the javascripts default command - document.getElementById("myTable").deleteRow(0); . Just specify the row number — Pranav s, May 24 '21 at 10:05
You haven't took a look at the console, `r` is not defined, and the inline listener throws an error when clicking on Delete button. Replace `r` with `this` in the `onclick` attribute. The most recommended way is to avoid inline listeners, and listen clicks on `tbody`, that way you need only a single listener. See https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — Teemu, May 24 '21 at 10:10
Does this answer your question? [Remove table row after clicking table row delete button](https://stackoverflow.com/questions/11553768/remove-table-row-after-clicking-table-row-delete-button) — Danila, Jul 25 '21 at 13:00

score 1 · Answer 1 · answered May 24 '21 at 10:36

1

Please replace your below code:

Older:

<td> <input type="button" onclick="delName(r)"  class="btn btn-primary" value="Delete"></td></td>

New: Add one rowId variable into your code which intital value is 0 and after that value is increment when new row added.

<td> <input type="button" onclick="delName(deletebtn'+rowId+')" id="deletebtn'+rowId+'" class="btn btn-primary" value="Delete"></td></td>

Please let me know if anything else

answered May 24 '21 at 10:36

Akash prajapati

384
3
7

I also want that the element should be removed from the array when the user clicks on that row. – Zara May 30 '21 at 11:45
For that you need to set the unique identifiers into the student array and when remove that row then need to loop the student array and find index based on unique identification and after remove from that array. – Akash prajapati Jun 14 '21 at 11:18
Have you checked this one? – Akash prajapati Jun 28 '21 at 09:44

NcXNaV · Answer 2 · 2021-07-25T10:20:53.890

I've edited your snippet and changed the delete function:

Remove r on delName() function, since it's undefined. But instead use event.target, which references to the object onto which the event was dispatched.

Try to run the code snippet blow:

function delName() {
    var td = event.target.parentNode; 
    var tr = td.parentNode; // the row to be removed
    tr.parentNode.removeChild(tr);
}

<!DOCTYPE html>
<html>

<head lang="en">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <style>
    body {
      margin: 85px;
    }
    
    .btn-primary {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <form class="container">
    <div class="form-group">
      <label for="name">Enter Name</label>
      <input type="text" class="form-control" id="firstname" placeholder="Enter Your Name">
    </div>
    <div class="form-group">
      <label for="age">Enter Age</label>
      <input type="text" class="form-control" id="age" placeholder="Age">
    </div>
    <div class="form-group">
      <label for="subject">Enter Subject</label>
      <input type="text" class="form-control" id="stusubject" placeholder="Subject">
    </div>
    <input type="button" onclick="showName()" class="btn btn-primary" value="submit">
  </form>
  <table class="table container mt-5" id="studList">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Subject</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
      </tr>
    </tbody>
  </table>
</body>

</html>
<script>
  var student = [{
      nname: "abc",
      age: 18,
      subject: "eng"
    },
    {
      nname: "red",
      age: 20,
      subject: "math"
    }
  ]

  function showName() {
    var firstName = document.getElementById("firstname").value;
    var age = document.getElementById("age").value;
    var stusubject = document.getElementById("stusubject").value;

    console.log("firstName :", firstName);
    console.log("Age :", age);
    console.log("subject :", stusubject);

    // push the data in array
    var newstud = {
      nname: firstName,
      age: age,
      subject: stusubject,
    }
    student.push(newstud);
    //console.log(newstud);
    console.log(student);

    var table = ' <tr>' +
      '<td>' + firstName + '</td>' +
      '<td>' + age + '</td>' +
      '<td>' + stusubject + '</td>' +
      '<td> <input type="button" onclick="delName()"  class="btn btn-primary" value="Delete"></td></td>' +
      '</tr>'
    $(table).appendTo('#studList tbody');
    console.log("table :", table);
  }

  //delete the row onclick
  function delName() {
    var td = event.target.parentNode; 
     var tr = td.parentNode; // the row to be removed
     tr.parentNode.removeChild(tr);
  }
  var table = ' <tr>' +
    '<td>' + firstName + '</td>' -
    +'<td>' + age + '</td>' +
    '<td>' + stusubject + '</td>' +
    '</tr>'
  $(table).deleteRow('#studList tbody');
  console.log("table :", table);
</script>

Reference: table-row-delete-button

dynamically delete row in javscript

2 Answers2