Элемент не удаляется из массива - PullRequest
Новая
       0

Элемент не удаляется из массива

0 голосов
/ 03 апреля 2020

Я пытаюсь удалить элемент, но не могу понять, почему элемент не удаляется из массива в последней строке функции удаления элемента, но элемент не удаляется из массива данных, я склеиваю массив, но это также не работает для мне, если есть какое-то лучшее решение, пожалуйста, помогите мне

Его в функции deleteitem 

  //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>

Ответы [ 3 ]

1 голос
/ 03 апреля 2020

Splice и Slice оба являются JavaScript функциями массива. Метод splice() возвращает удаленный элемент (ы) в массиве с изменением исходного массива, а метод slice() возвращает выбранный элемент (ы) в массиве как новый объект массива без изменения исходного массива.

То, что вы использовали здесь, это slice вместо splice. Если вы хотите использовать slice, верните полученный массив или замените slice на splice

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

// Or
if(index !== -1){
   const newData = data.slice(index,1);   
}
0 голосов
/ 03 апреля 2020

Я только что изменил delItem функцию

  • удалить строку таблицы
  • установить индекс в -1 (потому что массив начинается с 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>
0 голосов
/ 03 апреля 2020

На будущие вопросы вы получите больше ответов, если сможете максимально упростить свой вопрос. Код, который вы разместили, немного сложен.

При этом, я думаю, проблема здесь data.slice(index,1);. Array.prototype.slice не изменяет исходный массив. Возвращает новый массив. По этой причине, иногда люди используют его для создания копий массива, чтобы избежать мутации с чем-то вроде const arrCopy = originalArr.slice();.

Я думаю, вы ищете метод массива splice.

Надеюсь это приближает тебя Где объявлено data? Я вижу, что вы делаете с ней все что угодно и рассматриваете его как глобальную переменную, но не знаете, где его объявить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...