CODEWITHSUNDEEP
javascriptjqueryarrays
Azeez
Azeez

Reputation: 495

Item is not deleting from the array

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>

Upvotes: 0

Views: 122

Answers (3)

Vernon Jian Hao
Vernon Jian Hao

Reputation: 86

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>

Upvotes: 0

Pushkin
Pushkin

Reputation: 3604

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

Upvotes: 1

sdotson
sdotson

Reputation: 820

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.

Upvotes: 0

Related Questions