Removing Data Javascript

Question

I use an array of object to display data on a dynamic table I create with javascript inside the table, there are 2 button delete and edit when I press the delete I delete the data from the array but for some reason, the data still remains in the table ? can someone give me a clue why?

workers = [{
    name: 'Roni',
    phone: '0545931252',
    nickname: 'RoniBoy',
    mail: '[email protected]',
  },
  {
    name: 'Lior',
    phone: '0545996452',
    nickname: 'LiorBoy',
    mail: '[email protected]',
  },
  {
    name: 'Arman',
    phone: '0545886452',
    nickname: 'ArmanBoy',
    mail: '[email protected]',
  }
];

function deleteFromList(id) {
  workers.splice(id, 1);
  console.log(workers);
}

const toAppend = document.getElementById('appendBox');
let markup = '';

for (let x = 0; x < workers.length; x++) {

  markup += `<tr>
        <td >` + workers[x].name + `</td>
        <td>` + workers[x].nickname + `</td>
        <td>` + workers[x].phone + `</td>
        <td>` + workers[x].mail + `</td>
        <td><button onClick="deleteFromList(this.id)"  id="` + x + `"  class="btn btn-danger">Remove</button> <button class="btn btn-success">Edit</button></td>
      
    </tr>`
}

toAppend.innerHTML = markup;

<table id="appendBox"></table>

You will need to call the for loop EACH time you modify the array. You'll also need to remove the current table and replace it with your new markup. — Jordan Casey
– Jordan Casey, Commented Jan 16, 2020 at 14:49
Why use + when you are using template literals? Change it to: <td >${workers[x].name}</td>. You only need backticks at the beginning and the end. — adiga
– adiga, Commented Jan 16, 2020 at 14:50
there is also an issue with removing by index instead of id that can be noticed after removing more than one item — Slai
– Slai, Commented Jan 16, 2020 at 16:06

adiga · Accepted Answer · 2020-01-16 14:56:16Z

You have rerender html every time you update you array

workers = [
  {
    name: 'Roni',
    phone: '0545931252',
    nickname: 'RoniBoy',
    mail: '[email protected]',
  },
  {
    name: 'Lior',
    phone: '0545996452',
    nickname: 'LiorBoy',
    mail: '[email protected]',
  },
  {
    name: 'Arman',
    phone: '0545886452',
    nickname: 'ArmanBoy',
    mail: '[email protected]',
  }
];


function deleteFromList(id){
  workers.splice(id,1);
  console.log(workers);
  renderMarkup();
}

function renderMarkup() {
  const toAppend = document.getElementById('appendBox');
  let markup = '';

  for(let x = 0; x < workers.length; x++){
      markup += `
        <tr>
          <td >`+workers[x].name+`</td>
          <td>`+workers[x].nickname+`</td>
          <td>`+workers[x].phone+`</td>
          <td>`+workers[x].mail+`</td>
          <td><button onClick="deleteFromList(this.id)"  id="`+x+`"  class="btn btn-danger">Remove</button> <button class="btn btn-success">Edit</button></td>
        </tr>`
  }

  toAppend.innerHTML = markup;
}

renderMarkup();

<table id="appendBox"></table>

Josiah · Accepted Answer · 2020-01-16 15:00:32Z

2

If you want to remove stuff from your table then you might want to add some sequential IDs to each row so that you can directly delete one. You could also do something like this just grabbing one in the spot it's in and delete it that way. Are you looking to delete rows or are you just trying to delete a column in a row?

var tblBody = document.getElementById("tblBody");  //referencing a <tbody> tag's id
var row = document.getElementsByTagName("tr"); //get every tr element

tblBody.deleteRow(row[i].rowIndex);

answered Jan 16, 2020 at 15:00

Josiah

2043 silver badges14 bronze badges

1 Comment

Stephan Vierkant Over a year ago

This is a better answer! There is no need to redraw the table if you exactly know which table row to remove.

Collectives™ on Stack Overflow

Removing Data Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related