Home Not able to hide the UI the second time when added, First time works perfectly

Questions

Not able to hide the UI the second time when added, First time works perfectly

March 1, 2024

I have a use case where users can add items to a list and remove them, but the list cannot exceed 10 items. I’ve created an Add Item button to add UI elements and a Remove Item button to remove them using the 'display: 'none' property. The issue arises when I add an item with an ID that was previously deleted. In such cases, I’m unable to hide or delete it.

<!DOCTYPE html>
<html>

<head>
    <style>
        div.container {
            width: 100%;
            border: 1px solid gray;
            background-color: silver;
        }

        .button {
            background-color: silver;
            padding: 6px 8px 6px 16px;
            margin-top: 10px;
            color: '#000';
            font-size: 1.2vw;
            margin-left: 20px;
            border: none;
            outline: none;
            font-family: sans-serif;
        }


        .main {
            margin-left: 13%;
            /* Same as the width of the sidenav */
            font-size: 1.5vw;
            padding: 0px 10px;
            margin-Top: 13%;
            padding-bottom: 50px;
            height: 100%;
            /* border: 1px solid blue */
        }

        .submitButton {
            height: 50px;
            width: 40%;
            margin-top: 20px;
            font-size: 20px;
            border-radius: 10px;
            font-family: sans-serif
        }

        .addItemButton {
            height: 40px;
            width: 20%;
            margin-top: 20px;
            font-size: 20px;
            border-radius: 10px;
            align-items: flex-end;
            justify-self: flex-end;
            font-family: sans-serif
        }

        .removeItemButtonView {
            height: 40px;
            width: 20%;
            font-size: 20px;
            border-radius: 10px;
            align-items: flex-end;
            justify-self: flex-end;
            font-family: sans-serif
        }

        .submitButton:hover {
            background-color: #007893;
            color: #fff
        }

        input {
            height: 34px;
            width: 60%;
            text-align: center;
            font-size: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
            margin: 10px 0px;

        }

        .inputWidth {
            width: 40%;
        }

        .detailBox,
        .sceneBox {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
            border-bottom: 1px solid gray;
            padding: 20px;
        }
    </style>
</head>

<body style="background-color: silver;">
    <div class="container">
        <div class="sticky">
            <header>
            </header>
        </div>
        <!-- <article> -->
        <div class="main">
            <div class="cmdevice">
            </div>


            <button type="button" class="addItemButton" onclick="addItem()">Add Unit</button>

        </div>

    </div>
</body>

</html>

<script>

    let counter = 0
    let deviceArr = []

    const cmdevice = document.querySelector('.cmdevice');

    function addItem() {
        if (deviceArr.length >= 10) {
            return;
        }

        deviceArr.sort((a, b) => a - b);

        let newId = 1;
        for (let i = 0; i < deviceArr.length; i++) {
            if (deviceArr[i] === newId) {
                newId++;
            } else {
                break;
            }
        }

        deviceArr.push(newId);
        console.log('newId', newId)
        let cmItem = document.createElement('div');
        cmItem.setAttribute("id", `cm${newId}`);
        cmItem.innerHTML = `<div style="border: 1px solid; border-radius: 25px; margin: 30px 0px" >
                    <div class="seperator" style="margin: 30px 0px; padding: 0px 20px; display: flex; justify-content: space-between;   align-items: center">
                        <label>Device ${newId}</label>
                        <button type="button" class="removeItemButtonView" onclick="onClickRemoveCMItem(${newId})" >Remove Unit</button>
                    </div>
                    <div class="detailBox">
                        <div>Line Number</div>
                        <br>
                        <input class="input inputWidth" type="text" name="line${newId}" id="line${newId}" value="" />
                    </div>
                    <div class="detailBox" style="border-bottom: 0px" >
                        <div>Area No</div>
                        <br>
                        <input class="input inputWidth" type="text" name="area${newId}" id="area${newId}" value="" />
                    </div>`;
        cmdevice.append(cmItem);
    }

    function onClickRemoveCMItem(id) {
        let ind = deviceArr.indexOf(id)

        console.log(deviceArr, id, ind)
        if (ind !== -1) {
            deviceArr.splice(ind, 1)

            console.log('del', id)
            const a = document.getElementById(`cm${id}`)
            if (a) {
                a.style.display = 'none'
                a.innerHTML = ''
            }
        }

    }

</script>

I have tried various method to delete it. Every ting gives the same result.

>Solution :

When you delete it first time, you’re setting display of ‘cm1’ to none, and when you again add an entry, you create another ‘cm1’; while removing it second time, it finds first ‘cm1’ that’s already lying with display:none and never reaches the current ‘cm1’. Also, it’s not advisable to use multiple elements with same id.

It’s better to remove it from DOM. Use this instead of setting display –

function onClickRemoveCMItem(id) {
    let ind = deviceArr.indexOf(id)

    console.log(deviceArr, id, ind)
    if (ind !== -1) {
        deviceArr.splice(ind, 1)

        console.log('del', id)
        const a = document.getElementById(`cm${id}`)
        if (a) {
            a.remove();
        }
    }

}