CODEWITHSUNDEEP
javascriptarrays
Arman Gin
Arman Gin

Reputation: 53

Removing Data Javascript

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>

Upvotes: 1

Views: 74

Answers (2)

Josiah
Josiah

Reputation: 204

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);

Upvotes: 2

qiAlex
qiAlex

Reputation: 4346

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>

Upvotes: 2

Related Questions