dynamically delete row in javscript

Question

I am new to java script, need some help

I am working on Add/Remove data from table taking from input

Add operation is working fine but I am not able to delete the row in the table
I have gone throught 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

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

0

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

255
1
6

I also want that the element should be removed from the array when the user clicks on that row. – Zara May 29 '21 at 17:01

dynamically delete row in javscript

1 Answers1