项目未从数组中删除

Question

I am trying to delete the item but cant get why the item is not removing from the array its in last line on delete item function but the item is not getting delete from data array i splice the array but thats also not work for me if there is any better solution plz help me out

Its in deleteitem function

 //Constructor for student form var studentForm = function(iD,name,city,college,course,age){ this.id = iD; this.name = name; this.city = city; this.college = college; this.course = course; this.age = age; } //all data store here as object var data = []; //function to submit and display form var submitForm = function(){ //getInput data from the field var getInput = { name:document.querySelector('.name').value, city:document.querySelector('.city').value, college:document.querySelector('.college').value, course:document.querySelector('.course').value, age:document.querySelector('.age').value, } //store the data which you get previous to use that var input = getInput; //Create a new id var ID; if(data.length > 0){ ID = data[data.length - 1].id +1; }else{ ID =1; } //Use the constructor and make a new data var newForm = new studentForm(ID,input.name,input.city,input.college,input.course,input.age); //Add the student data into the ds data.push(newForm); //Display the data in the Document //html line to display data of object var html = '<tr id="id-%roll%"><td>%id%</td><td class="tname">%name%</td><td class="tcity">%city%</td><td class="tcollege">%college%</td><td class="tcourse">%course%</td><td class="tage">%age%</td><td><button class="delbtn">Delete</button></td></tr>'; //Replace the placeHOlder With actual data var newHtml = html; //newHtml = "<td class=\"id-%id%\">%id%</td>".replace(/%id%/g, ID) newHtml = newHtml.replace('%roll%',ID); newHtml = newHtml.replace('%id%',ID); newHtml = newHtml.replace('%name%',input.name); newHtml = newHtml.replace('%city%',input.city); newHtml = newHtml.replace('%college%',input.college); newHtml = newHtml.replace('%course%',input.course); newHtml = newHtml.replace('%age%',input.age); //Get the element which after you wants to print the data document.querySelector('.tablemain').insertAdjacentHTML('beforeend',newHtml); //Clearint the fields var fields = document.querySelectorAll('.name' + ', ' + '.city' + ', ' + '.college' + ', ' + '.course' + ', ' + '.age'); //Convert it into array var fieldsArr = Array.prototype.slice.call(fields); //Loopthrough all fields to clear the fields fieldsArr.forEach(function(current,index,array){current.value = '';}); fieldsArr[0].focus(); //Deleting element // parent element class = table id = id delete button class =delbtn console.log(newForm); return newForm; } document.querySelector('.btn').addEventListener('click',submitForm); //Delete section //Deleting element // parent element class = table id = id delete button class =delbtn document.querySelector('.table').addEventListener('click',delItem); function delItem(e){ var iTemId,splitID; iTemId = e.target.parentNode.parentNode.id; if(iTemId){ splitID = iTemId.split('-'); var ElementID = parseInt(splitID[1]); var deleteItem = function(id){ var ids = data.map(function(cur){ return cur.id; }); var index = ids.indexOf(id); if(index.== -1){ data,slice(index;1); } }; deleteItem(ElementID); }; };

 <input type="text" placeholder="name" class="name"> <input type="text" placeholder="city" class="city"> <input type="text" placeholder="college" class="college"> <input type="text" placeholder="Course" class="course"> <input type="number" placeholder="age" class="age"> <button class="btn" value="submit">Submit</button> <div class="table"> <table class="tablemain"> <tr class="table-heading"><th>ID</th><th>Name</th><th>City</th><th>College</th><th>Course</th><th>Age</th><th>Delete</th></tr> </table> </div>

Answer 1

Splice and Slice both are JavaScript Array functions. The splice() method returns the removed item(s) in an array while mutating the original array and slice() method returns the selected element(s) in an array, as a new array object without mutating the original array.

What you have used here is slice instead of splice . If you want to use slice , return the resulting array or replace slice with splice

if(index !== -1){
   data.splice(index,1);   
}

// Or
if(index !== -1){
   const newData = data.slice(index,1);   
}

Answer 2

For future questions, you'll get more responses if you can simplify your question as much as possible. The code you posted is a little tough to grok.

That being said, I think the issue is here data.slice(index,1); . Array.prototype.slice does not mutate the original array. It returns a new array. For this reason, sometimes folks use it to create copies of an array to avoid mutation with something like const arrCopy = originalArr.slice(); .

I think you are looking for the array splice method.

Hope this gets you closer. Where is data declared? I see you're doing all sorts of things to it and treating as a global var but not sure where you declare it.

Answer 3

I just modified delItem function

• delete table row
• set index to -1 (because array starts from 0)

 //Constructor for student form var studentForm = function(iD,name,city,college,course,age){ this.id = iD; this.name = name; this.city = city; this.college = college; this.course = course; this.age = age; } //all data store here as object var data = []; //function to submit and display form var submitForm = function(){ //getInput data from the field var getInput = { name:document.querySelector('.name').value, city:document.querySelector('.city').value, college:document.querySelector('.college').value, course:document.querySelector('.course').value, age:document.querySelector('.age').value, } //store the data which you get previous to use that var input = getInput; //Create a new id var ID; if(data.length > 0){ ID = data[data.length - 1].id +1; }else{ ID =1; } //Use the constructor and make a new data var newForm = new studentForm(ID,input.name,input.city,input.college,input.course,input.age); //Add the student data into the ds data.push(newForm); //Display the data in the Document //html line to display data of object var html = '<tr id="id-%roll%"><td>%id%</td><td class="tname">%name%</td><td class="tcity">%city%</td><td class="tcollege">%college%</td><td class="tcourse">%course%</td><td class="tage">%age%</td><td><button class="delbtn">Delete</button></td></tr>'; //Replace the placeHOlder With actual data var newHtml = html; //newHtml = "<td class=\"id-%id%\">%id%</td>".replace(/%id%/g, ID) newHtml = newHtml.replace('%roll%',ID); newHtml = newHtml.replace('%id%',ID); newHtml = newHtml.replace('%name%',input.name); newHtml = newHtml.replace('%city%',input.city); newHtml = newHtml.replace('%college%',input.college); newHtml = newHtml.replace('%course%',input.course); newHtml = newHtml.replace('%age%',input.age); //Get the element which after you wants to print the data document.querySelector('.tablemain').insertAdjacentHTML('beforeend',newHtml); //Clearint the fields var fields = document.querySelectorAll('.name' + ', ' + '.city' + ', ' + '.college' + ', ' + '.course' + ', ' + '.age'); //Convert it into array var fieldsArr = Array.prototype.slice.call(fields); //Loopthrough all fields to clear the fields fieldsArr.forEach(function(current,index,array){current.value = '';}); fieldsArr[0].focus(); //Deleting element // parent element class = table id = id delete button class =delbtn console.log(newForm); return newForm; } document.querySelector('.btn').addEventListener('click',submitForm); //Delete section //Deleting element // parent element class = table id = id delete button class =delbtn document.querySelector('.table').addEventListener('click',delItem); function delItem(e){ // Delete table row document.getElementById(e.target.parentNode.parentNode.id).remove(); var iTemId,splitID; iTemId = e.target.parentNode.parentNode.id; if(iTemId){ splitID = iTemId.split('-'); var ElementID = parseInt(splitID[1]); var deleteItem = function(id){ var ids = data.map(function(cur){ return cur.id; }); var index = ids.indexOf(id); if(index.== -1){ // delete array in data (array start with 0) data = data,slice(index-1;1); } }; deleteItem(ElementID); }; };

 <input type="text" placeholder="name" class="name"> <input type="text" placeholder="city" class="city"> <input type="text" placeholder="college" class="college"> <input type="text" placeholder="Course" class="course"> <input type="number" placeholder="age" class="age"> <button class="btn" value="submit">Submit</button> <div class="table"> <table class="tablemain"> <tr class="table-heading"><th>ID</th><th>Name</th><th>City</th><th>College</th><th>Course</th><th>Age</th><th>Delete</th></tr> </table> </div>