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

Question

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

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

我在 class CardManager 的阵列中添加三张卡。

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

所以拼接不起作用。

问题出在最后一个称为delfunc()的 function 的循环中。

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, pic, description, assignee, dDate, st) {
        const nCard = new Card(this.currentId++, cname, pic, description, assignee, dDate, 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, "test", 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);
        }
    }
}

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

Answer 2

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