Delete row function from table in JavaScript

Question

I run the program and add student to the list, then I delete this studentlist row. Then When I add new student the studentlist show me both deleted row and new inserted row? How can I solve this?

function renderStudentList() {
  tableBody.innerHTML = "";
  studentList.map((student) => {
    const studentRow = `
            <tr>
                <td>${student.id}</td>
                <td>${student.name}</td>
                <td>${student.surname}</td>
                <td>${student.birthday}</td>
                <td>${student.age}</td>
                <td>${student.gender === "M" ? "Male" : "Female"}</td>
                <td>
                    <img id="delete" src="./icons/delete.svg" alt="delete" onclick="deleteRow(this)">
                    <img id="edit" src="./icons/edit.svg" alt="edit" >
                </td>
            </tr>
        `;
    tableBody.insertAdjacentHTML("beforeend", studentRow);
  });
}

addStudentBtn.addEventListener("click", (e) => {
  e.preventDefault();
  const newStudent = {
    id: generateId(),
    name: document.getElementById("name").value,
    surname: document.getElementById("surname").value,
    birthday: document.getElementById("birthday").value,
    age: document.getElementById("age").value,
    gender: document.getElementById("genderM").checked ? "M" : "F",
  };
  if (isDataValid(newStudent)) {
    document.getElementById("student-form").reset();
    studentList.push(newStudent);
    renderStudentList();
  } else {
    console.log("PLEASE FILL THE DATA");
  }
});

function deleteRow(r) {
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("table-body").deleteRow(i - 1);
}

Youssouf Oumar · Accepted Answer · 2022-08-13 16:27:13Z

1

You are removing the row from the DOM by calling deleteRow(i - 1) but not from the actual list inside studentList, that's why next time you call renderStudentList(), what you have deleted shows up.

An easy way to overcome this and that would simplify your code is to to first change renderStudentList() so each row gets an id, like so:

function renderStudentList() {
  tableBody.innerHTML = "";
  studentList.map((student) => {
    const studentRow = `
      <tr id="${student.id}">
        <td>${student.id}</td>
        <td>${student.name}</td>
        <td>${student.surname}</td>
        <td>${student.birthday}</td>
        <td>${student.age}</td>
        <td>${student.gender === "M" ? "Male" : "Female"}</td>
        <td>
          <img id="delete" src="./icons/delete.svg" alt="delete" onclick="deleteRow(${student.id})" />
          <img id="edit" src="./icons/edit.svg" alt="edit" />
        </td>
      </tr>
    `;
    tableBody.insertAdjacentHTML("beforeend", studentRow);
  });
}

And deleteRwo as below, so it removes the element from the DOM as well as from the list, by using the id that he gets while generating the template littoral:

function deleteRow(id) {
  studentList = studentList.filter(student => student.id !== id);
  document.getElementById(`${id}`).remove();
}

edited Aug 13, 2022 at 16:27

answered Aug 13, 2022 at 13:44

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

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

5 Comments

Software Engineer Over a year ago

it doesn't work. it gives error: student isn't defined onclick img

Youssouf Oumar Over a year ago

I made a mistake, take my new version of renderStudentList(). I just edited it. Also I wanna know, generateId() returns a string, right?

Software Engineer Over a year ago

it returns number: function generateId() { return Math.floor(Math.random() * 1000); }

Youssouf Oumar Over a year ago

Okay, try my last edits of the two functions and let me know.

Youssouf Oumar Over a year ago

Hi @Javascript, is your problem solved?

Collectives™ on Stack Overflow

Delete row function from table in JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related