想要使用拼接方法从对象数组中删除动态附加的卡，但循环迭代得到错误的值

问题描述

我正在使用类制作任务计划器。

这些任务以动态附加卡的形式保存。

我要在CardManager类的数组中添加三张卡。

当我通过按删除按钮选择要删除的卡时，可以正确检索到ID，但是在最后一个具有delfunc循环的for函数中，我得到了错误的数组长度。 / p>

所以拼接无法正常工作。

问题出在名为delfunc()的最后一个函数的循环中。

class Card {
    constructor(id,cname,pic,description,assignee,dDate,st) {
        this.id = id;
        this.cname = cname;
        this.pic = pic;
        this.description = description;
        this.assignee = assignee;
        this.dDate = dDate;
        this.st = st;
        // this.info=info;
    }
}
class CardManager {
    constructor() {
        this.cardArr = [];
        this.currentId = 1;
    }
    addcard(cname,st) {
        const nCard = new Card(this.currentId++,st); //creates 
        an instance of class card
        this.cardArr.push(nCard);
    }

}
const cardDeck = new CardManager(); //create an instance of card manager to access the members


// cardDeck.addcard("laundry","test","testing","SAEed","thursday","to do");
let tname = document.querySelector("#text1"); //accepting user input from form
let tdes = document.querySelector("#des");
let assignee = document.querySelector("#assignee");
let dDate = document.querySelector("#dDate");
let sTatus = document.querySelector("#stAtus");


let addButton = document.querySelector("#addButton");

addButton.onclick = function () {
    alert("here i am card deck");
    cardDeck.addcard(tname.value,tdes.value,assignee.value,dDate.value,sTatus.value);
    $('#myModal').modal('hide');
}


let btn1 = document.querySelector("#btn1");
let buttonCount = 1;

btn1.onclick = function displayListHtml() {

    let html = "";
    alert(cardDeck.cardArr.length);

    for (let i = 0; i < cardDeck.cardArr.length; i++) {
        html = `<div class="card">
                   <h1>${cardDeck.cardArr[i].cname}</h1>
                   <img src="sample.jpg" alt="Denim Jeans" style="width:100%">
                   <p>${cardDeck.cardArr[i].description}</p>
                   <p>${cardDeck.cardArr[i].assignee}</p>
                   <p>${cardDeck.cardArr[i].dDate}</p>
                   <p>${cardDeck.cardArr[i].st}</p>
                   <p>${cardDeck.cardArr[i].id}</p>
                   <p><button class="delete btn btn-primary" id="dbutton_${cardDeck.cardArr[i].id}"> 
                   Delete</button></p>
                   <p><button class="Edit btn btn-primary" id="ebutton_${cardDeck.cardArr[i].id}"> 
                   Edit</button></p>
                   </div>`;
        buttonCount++;
    }
    const taskcontainer = document.querySelector("#taskcontainer");
    const element = document.createrange().createContextualFragment(html);
    element.querySelector("button.delete")
        .addEventListener("click",delfunc);
    element.querySelector("button.Edit")
        .addEventListener("click",edifunc);
    //  element.addEventListener("click",yourClickEventHandler);
    taskcontainer.append(element);
}

function delfunc() {

    alert("i am in delete function");
    const taskElement = event.target.closest(".delete"); //see line 74.
    let delIdArr = taskElement.id.split("_"); //spliting the id by underscore. i.e . dbuton_id 
    let retreiveId = delIdArr[1];

    for (let j = 0; j < this.cardDeck.cardArr.length; j++) {
        if (retreiveId === j) {
            this.cardDeck.cardArr.splice(retreiveId,1);
        }
    }
}

解决方法

这是您关注的最低版本。但是看起来像splice的呼叫正在按预期进行。

const del = (cardArr,retreiveId) => {
  for (let j = 0; j < cardArr.length; j++) {
    if (retreiveId === j) {
      cardArr.splice(retreiveId,1);
    }
  }
};

const cardArr = [2,3,4];
// delete the index 1
del(cardArr,1);

console.log(cardArr);

// Case where delete index out of array index
const a = [1];
del(a,1)
console.log(a);

,

function delfunc() {
        alert("I am in delete function");
        const taskElement = event.target.closest(".delete");//see line 74.
        let delIdArr = taskElement.id.split("_"); 
        let retrieveId = delIdArr[1];
        var arr=[];

        for (let j = 1; j <= cardDeck.cardArr.length; j++ ) {
              if (retrieveId == j) {
                  arr = cardDeck.cardArr.splice(retreiveId,1);
              }