Objects inside array not properly deleted in javascript-CodePudding

I can't delete the objects in the array by myself randomly, whichever I want to delete, it removes the first object from the array. I also tried "findIndex()", it also deletes the last one constantly, I tried to solve it all day but unfortunately I couldn't find the error. I leave the codes below, can you help?

'use strict';

let productListArray=[
    {'productName':'product_0', 'productId':'prdctID_0'},
    {'productName':'product_1', 'productId':'prdctID_1'},
    {'productName':'product_2', 'productId':'prdctID_2'}];

let productListHTML=document.getElementById('product-list');
let inputBox=document.getElementById('input-box');
let productDelAddIcons=document.getElementById('del-add');
let inputBoxBtn=document.getElementById('input-btn');

for(let product of productListArray){
    let productHTML=`
    <div  id="${product.productId}">
        <div >
            <input type="checkbox" name="" id="">
            <h1>${product.productName}</h1>
        </div>
        <div id="del-add">
            <i  onclick="deleteProduct(${product.productId})"></i>
            <i ></i>
        </div>
    </div>
    `;
    productListHTML.insertAdjacentHTML('beforeend', productHTML);
};

/*  */

inputBox.children[1].addEventListener('click', function(){
    let product=`
    <div  id="product_${productListArray.length}">
        <div >
            <input type="checkbox" name="" id="">
            <h1>${inputBox.children[0].value}</h1>
        </div>
        <div id="del-add">
            <i ></i>
            <i  onclick="deleteProduct(id)"></i>
        </div>
    </div>
    `;
    productListArray.push(inputBox.children[0].value);
    productListHTML.insertAdjacentHTML('beforeend', product);
});

inputBoxBtn.addEventListener('keypress', function(){
    if(event.key=='Enter'){
        inputBoxBtn.click();
    };
});

/* productDelAddIcons.children[0].addEventListener('click', function(id){
    let deletedId;
    for(index in productListArray){
        if(productListArray[index].id==id){
            deletedId=index;
        };
    };
    productListArray.splice(deletedId, 1);
}); */

function deleteProduct(id){
console.log(id);
let deletedId;
for(let index in productListArray){
    if(productListArray[index].productId==id){
        deletedId=index;
        /* delete productListArray[index]; */
    };
};
console.log('1');
productListArray.splice(deletedId, 1);

console.log('2');
};

*{margin:0;padding:0;box-sizing:border-box;font-family:'Saira Semi Condensed', sans-serif}#input-box{padding:5px;display:flex;justify-content:center}#input-box #input-text{margin:10px;width:50vw;height:10vh;padding:0 15px;font-size:20px;border-radius:100px}#input-box #input-btn{border:none;margin:10px;border-radius:100px;width:12vw;font-size:25px;background-color:#36AE7C;color:aliceblue;transition:.15s;cursor:pointer}#input-box #input-btn:hover{background-color:#2e9268}#product-list{display:flex;flex-direction:column;align-items:center;padding:20px}#product-list .product{margin:8px;border:1px solid #F9D923;border-radius:1000px;display:flex;justify-content:space-between;width:70vw;padding:0 20px;height:11vh;transition:.5s}#product-list .product .check-h1{display:flex;align-items:center}#product-list .product .check-h1 h1{font-size:25px}#product-list .product .check-h1 input{width:20px;height:20px;margin:10px}#product-list .product #del-add{display:flex;font-size:25px;align-items:center;text-align:center}#product-list .product #del-add i{border-radius:8px;width:40px;height:40px;margin:0 5px;padding:8px;transition:.15s;cursor:pointer}#product-list .product #del-add i:hover{background-color:#F9D923}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/63652c9910.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./style.css" >
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Saira Semi Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>

    <div id="input-box">
        <input type="text"  id="input-text">
        <button id="input-btn">ADD</button>
    </div>

    <div id="product-list">
        <!-- <div  id="product_${index}">
            <div >
                <input type="checkbox" name="" id="">
                <h1>${productListArray[index]}</h1>
            </div>
            <div id="del-add">
                <i ></i>
                <i ></i>
            </div>
        </div> -->
    </div>
    <script src="./script.js"></script>
</body>
</html>

CodePudding user response：

        let productListArray = [
            { 'productName': 'product_0', 'productId': 'prdctID_0' },
            { 'productName': 'product_1', 'productId': 'prdctID_1' },
            { 'productName': 'product_2', 'productId': 'prdctID_2' }];

        let productListHTML = document.getElementById('product-list');
        let inputBox = document.getElementById('input-box');
        let productDelAddIcons = document.getElementById('del-add');
        let inputBoxBtn = document.getElementById('input-btn');

        for (let product of productListArray) {
            let productHTML = `
    <div  id="${product.productId}">
        <div >
            <input type="checkbox" name="" id="">
            <h1>${product.productName}</h1>
        </div>
        <div id="del-add">
            <i  onclick="deleteProduct(${product.productId})"></i>
            <i ></i>
        </div>
    </div>
    `;
            productListHTML.insertAdjacentHTML('beforeend', productHTML);
        };

        /*  */

        inputBox.children[1].addEventListener('click', function () {
            let product = `
    <div  id="product_${productListArray.length}">
        <div >
            <input type="checkbox" name="" id="">
            <h1>${inputBox.children[0].value}</h1>
        </div>
        <div id="del-add">
            <i ></i>
            <i  onclick="deleteProduct(id)"></i>
        </div>
    </div>
    `;
            productListArray.push(inputBox.children[0].value);
            productListHTML.insertAdjacentHTML('beforeend', product);
        });

        inputBoxBtn.addEventListener('keypress', function () {
            if (event.key == 'Enter') {
                inputBoxBtn.click();
            };
        });

        /* productDelAddIcons.children[0].addEventListener('click', function(id){
            let deletedId;
            for(index in productListArray){
                if(productListArray[index].id==id){
                    deletedId=index;
                };
            };
            productListArray.splice(deletedId, 1);
        }); */
        let deletedId;
        function deleteProduct(id) {
            for (let index = 0; index < productListArray.length; index  ) {
                // you were taking full div not id for id use div.id
                if (productListArray[index].productId == id.id) {
                    console.log(productListArray[index].productId);
                    deletedId = index;
                    // remove class from html
                    id.remove();
                };
            }

            // it's taking all array vales at once
            // for (let index in productListArray) {
            //     if (productListArray[index].productId == id.id) {
            //         console.log(productListArray[index].productId);
            //         deletedId = index;
            //         /* delete productListArray[index]; */
            //     };
            // };

            // for removing index value from array 
            productListArray.splice(deletedId, 1);
            console.log(productListArray);

        };

      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Saira Semi Condensed', sans-serif
        }

        #input-box {
            padding: 5px;
            display: flex;
            justify-content: center
        }

        #input-box #input-text {
            margin: 10px;
            width: 50vw;
            height: 10vh;
            padding: 0 15px;
            font-size: 20px;
            border-radius: 100px
        }

        #input-box #input-btn {
            border: none;
            margin: 10px;
            border-radius: 100px;
            width: 12vw;
            font-size: 25px;
            background-color: #36AE7C;
            color: aliceblue;
            transition: .15s;
            cursor: pointer
        }

        #input-box #input-btn:hover {
            background-color: #2e9268
        }

        #product-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px
        }

        #product-list .product {
            margin: 8px;
            border: 1px solid #F9D923;
            border-radius: 1000px;
            display: flex;
            justify-content: space-between;
            width: 70vw;
            padding: 0 20px;
            height: 11vh;
            transition: .5s
        }

        #product-list .product .check-h1 {
            display: flex;
            align-items: center
        }

        #product-list .product .check-h1 h1 {
            font-size: 25px
        }

        #product-list .product .check-h1 input {
            width: 20px;
            height: 20px;
            margin: 10px
        }

        #product-list .product #del-add {
            display: flex;
            font-size: 25px;
            align-items: center;
            text-align: center
        }

        #product-list .product #del-add i {
            border-radius: 8px;
            width: 40px;
            height: 40px;
            margin: 0 5px;
            padding: 8px;
            transition: .15s;
            cursor: pointer
        }

        #product-list .product #del-add i:hover {
            background-color: #F9D923
        }

    <script src="https://kit.fontawesome.com/63652c9910.js" crossorigin="anonymous"></script>
    <div id="input-box">
        <input type="text"  id="input-text">
        <button id="input-btn">ADD</button>
    </div>

    <div id="product-list">
        <!-- <div  id="product_${index}">
            <div >
                <input type="checkbox" name="" id="">
                <h1>${productListArray[index]}</h1>
            </div>
            <div id="del-add">
                <i ></i>
                <i ></i>
            </div>
        </div> -->
    </div>