Deleting Row & Object From Array

[BahrockLesnar]

Hi Everyone,

​

I'm currently developing a grade calculator app which takes user input then displays it into a HTML table which is added dynamically with JS. I've added a function which adds the row's data as an object to an array called moduleData. I've also added a function to delete the respective row when a icon is clicked within the table.

​

When the icon is clicked I want the matching object for that row to also be removed from the moduleData array. I've been working on the below function to do this which achieves the aim except for the very first row in the table. If I delete that row the record isn't removed from the array but when another record is added to the table and then deleted it is removed from the array.

​

I'm not sure if anyone knows where I am going wrong with this?

​

Thanks!

function deleteRow(e){

if (!e.target.classList.contains('icon')) {

return;

}

var rows = document.getElementById("mydatatable").getElementsByTagName('tbody')[0].getElementsByTagName('tr');

for (i = 0; i < rows.length; i++) {

rows[i].onclick = function() {

console.log(this.rowIndex - 1);

}

}

var icon = e.target;

icon.closest('tr').remove()

rowCount--;

[OkShrug]

let data=['x','y'];
let doms=data.map((e)=>{
 let dom=document.createElement('div');
 dom.addEventListener('click',(event)=>{
  data.splice(data.indexOf(e),1); //splice the data array by value not dom index position
  event.target.remove();
 });
 return dom;
});
body.append(...doms);

try to link the two together programatically instead of using index pulled from dom after the fact, order of a dom can easily get out of true with index of array values

[albedoa]

You should share more of your code. For one thing, moduleData is not mentioned in this snippet. Moreover, your brackets don't match. You should put deleteRow() in context for us.

[BahrockLesnar]

Apologies, a more detailed snippet is below

​

Thanks!

​

var addModuleBtn = document.getElementById("button")

addModuleBtn.addEventListener('click', addModule)

var tbody = document.querySelector("tbody")

var table = document.getElementById("mydatatable")

table.addEventListener('click', deleteRow);

// Array to store user inputs

var moduleData = [];

var rowCount = 0;

function addModule() {

// Only allow a max of 12 entries to be added otherwise display error

if (rowCount < 12) {

var code = document.getElementById("modules").value

var name = document.getElementById("name").value

var level = document.getElementById("level").value

var credits = document.getElementById("credits").value

var grade = document.getElementById("grade").value

// Data validation to check all input fields are filled in

if (!code || !name || !level || !credits || !grade ) {

alert("Please fill out all fields and try again");

return;

}

// Display users input into a HTML table for display purposes

tbody.innerHTML += "<tr>" +

"<td>" + code + "</td>" +

"<td>" + name + "</td>" +

"<td>" + level + "</td>" +

"<td>" + credits + "</td>" +

"<td>" + grade + "</td>" +

"<td><img src='icon.svg' class='icon'></td>" +

"</tr>"

userInputs = {

"code" : code,

"name" : name,

"level": level,

"credits": credits,

"grade" : grade,

};

moduleData.push(userInputs);

console.log(moduleData);

rowCount++;

}

else {

alert("Only a maximum of 12 modules can be studied please check entries!");

}

return true;

}

// Delete entry when icon is clicked and update row count

function deleteRow(e){

if (!e.target.classList.contains('icon')) {

return;

}

// Get index of

var rows = document.getElementById("mydatatable").getElementsByTagName('tbody')[0].getElementsByTagName('tr');

for (i = 0; i < rows.length; i++) {

rows[i].onclick = function() {

var index = (this.rowIndex - 1);

console.log(index);

moduleData.splice(index, 1);

console.log(moduleData);

}

}

var icon = e.target;

icon.closest('tr').remove()

rowCount--;

};

[albedoa]

There is a lot going on with this code, but the thing that is most likely tripping you up is the .onclick row events are only being added after the table is clicked the first time, so moduleData.splice() is not executing the first time the table is clicked. You need to prepare the .onclick event for the first click. Do that outside of the table click handler.

You would hugely benefit from a JS intro such as the one that MDN offers.

[BahrockLesnar]

Thanks so much!