Issues with Splice

im trying to remove certain object from an array of object, when first object is clicked to remove its removes that object but when i click on second it removes the entire objects from an array.
JS let database = {
membersList: [
{
firstName: "Avinash",
lastName: "Tallapaneni",
emailID: "[email protected]",
avatar:
"https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
},
{
firstName: "Icey",
lastName: "Mint",
emailID: "[email protected]",
avatar:
"https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
},
{
firstName: "Billy",
lastName: "Schneider",
emailID: "[email protected]",
avatar:
"https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
},
],
mainboard: [],
};



const removeMembermodal = document.querySelector(".remove-member");
const removeMemberConfirmation = document.querySelector(
".remove-member-footer"
);

const removeMember = () => {
const removeMemberBtn = document.querySelectorAll(".remove-btn");
removeMemberBtn.forEach((value) => {
value.addEventListener("click", () => {

removeMemberConfirmation.addEventListener("click", () => {
let dataValue = value.getAttribute("data-value");
database.membersList.splice(dataValue - 1, 1);
removeMembermodal.style.display = "none";
console.log(database.membersList);
teamMemberUpdateUI();
});
});
});
};
JS let database = {
membersList: [
{
firstName: "Avinash",
lastName: "Tallapaneni",
emailID: "[email protected]",
avatar:
"https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
},
{
firstName: "Icey",
lastName: "Mint",
emailID: "[email protected]",
avatar:
"https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
},
{
firstName: "Billy",
lastName: "Schneider",
emailID: "[email protected]",
avatar:
"https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
},
],
mainboard: [],
};



const removeMembermodal = document.querySelector(".remove-member");
const removeMemberConfirmation = document.querySelector(
".remove-member-footer"
);

const removeMember = () => {
const removeMemberBtn = document.querySelectorAll(".remove-btn");
removeMemberBtn.forEach((value) => {
value.addEventListener("click", () => {

removeMemberConfirmation.addEventListener("click", () => {
let dataValue = value.getAttribute("data-value");
database.membersList.splice(dataValue - 1, 1);
removeMembermodal.style.display = "none";
console.log(database.membersList);
teamMemberUpdateUI();
});
});
});
};
the issue is most definitely with splice. ANyone knows how to fix this?
7 Replies
Zoë
Zoë2y ago
The issue is that you start off with
avinashta... with data-value 1
iceymint with data-value 2
billy with data-value 3
avinashta... with data-value 1
iceymint with data-value 2
billy with data-value 3
The first removal works fine, it gets data-value 1 then runs splice(0,1) which removes the first entry You're left with
iceymint with data-value 2
billy with data-value 3
iceymint with data-value 2
billy with data-value 3
So you click iceymint and it gets data-value 2 then runs splice(2,1) which removes billy because they're in position 2 now However this should just leave iceymint behind, but looking at the console log console.log(database.membersList) is ran twice. This seems to be because every time you click to intend to delete a user the confirmation button gets another click event listener added. The first delete sets one to remove at index 1, then when you delete the second time there's already a deletion at index 1 with another deletion at index 2 So, to solve this I would instead of storing indexes in data-value I would store a key for instance it could just be their email. Then rather than use splice use something like
const email = value.getAttribute('data-value');
database.membersList =
database.membersList
.filter(({emailId}) => emailId != email);
const email = value.getAttribute('data-value');
database.membersList =
database.membersList
.filter(({emailId}) => emailId != email);
Also move the confirmation click listener to outside so it's only activated once. This leaves the issue of passing which one was clicked to the confirmation box and I'd have an object that relates to the confirmation box contain that value Or remove the event listener from the confirmation button
Avinash
Avinash2y ago
after deleting the first user im running this again
const teamMemberUpdateUI = () => {
let temp = "";
let index = 1;
for (const value of database.membersList) {
temp += `<div class="team-member">
<img src="${value.avatar}" alt="avatar" />
<div class="team-member-details">
<div class="name">${value.firstName + " " + value.lastName}</div>
<div class="email">${value.emailID}</div>
</div>
<div class="remove-btn" data-value = ${index}>
<svg>
<use href="icons.svg#IcOutlineAdd"></use>
</svg>
</div>
</div>`;
index++;
}
teamMemberCollection.innerHTML = temp;
removeMember();
};
const teamMemberUpdateUI = () => {
let temp = "";
let index = 1;
for (const value of database.membersList) {
temp += `<div class="team-member">
<img src="${value.avatar}" alt="avatar" />
<div class="team-member-details">
<div class="name">${value.firstName + " " + value.lastName}</div>
<div class="email">${value.emailID}</div>
</div>
<div class="remove-btn" data-value = ${index}>
<svg>
<use href="icons.svg#IcOutlineAdd"></use>
</svg>
</div>
</div>`;
index++;
}
teamMemberCollection.innerHTML = temp;
removeMember();
};
so data attribute is reset once again
Zoë
Zoë2y ago
Also for syntax highlighting you want to put the "js" on the same line as ```js
Zoë
Zoë2y ago
You'll need to replace
<div class="remove-btn" data-value = ${index}>
<div class="remove-btn" data-value = ${index}>
with
<div class="remove-btn" data-value = ${value.emailID}>
<div class="remove-btn" data-value = ${value.emailID}>
Or you could give users a unique id and then use that, email was the only thing from the data you provided that was unique. An id would be better. You can use the uuid library https://www.npmjs.com/package/uuid to do that
npm
uuid
RFC4122 (v1, v4, and v5) UUIDs. Latest version: 9.0.0, last published: 8 months ago. Start using uuid in your project by running npm i uuid. There are 53433 other projects in the npm registry using uuid.
Avinash
Avinash2y ago
i will try this. also im confused when you said i need to confirmation click outside, i did that . it wasnt working anf the value it retuned was undefined
Zoë
Zoë2y ago
That's because you were passing in value from the first click, but outside value is undefined. You need to pass value some other way
ME
ME2y ago
I had this issue, I just used jquery
Want results from more Discord servers?
Add your server