The structure of the removeChild dom has changed, but the page has not changed.

< html >
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    <div id="menu">
    </div>
    <script>
        let menu = [
            {"type_id":1,"name":"","food":[
                                            {"food_id":1,"name":"","price":"10"},
                                            {"food_id":2,"name":"","price":"11"},
                                            {"food_id":3,"name":"","price":"12"}
                                            ]},
            {"type_id":2,"name":"","food":[
                                            {"food_id":4,"name":"","price":"13"},
                                            {"food_id":5,"name":"","price":"14"}
                                            ]},
            {"type_id":3,"name":"","food":[
                                            {"food_id":6,"name":"","price":"15"},
                                            {"food_id":7,"name":"","price":"16"}
                                            ]}      
        ];

        function createMenuList() {
        //
            let menudiv = document.getElementById("menu");
            let menulist = document.createElement("ul");
            for (let index in menu) {
                let typeli = document.createElement("li");
                let typename = document.createTextNode(menu[index]["name"]);
                typeli.setAttribute("type_id", `${menu[index]["type_id"]}`);
                typeli.appendChild(typename);
                typeli.onclick = () => {
                    let typediv = document.getElementById("second");
                    if (typediv) {
                        typediv.parentNode.removeChild(typediv);
                    };
                    //
                    createTypeList(menu[index]["type_id"]);
                };
                menulist.appendChild(typeli);
            }
            menudiv.appendChild(menulist);
        };

        function createTypeList(typeId) {
        //
            if (!typeId) return;
            let typediv = document.querySelector("[type_id="" + typeId + ""]");
            let type = menu[typeId - 1]["food"];
            let typelist = document.createElement("ul");
            typelist.setAttribute("id", "second");

            for (let index in type) {
                let nameli = document.createElement("li");
                let name = document.createTextNode(type[index]["name"]);
                let foodId = type[index]["food_id"];
                let button = createDeleteButton();
                nameli.setAttribute("food_id", `${foodId}`);

                //
                nameli.addEventListener("click", function(e) {
                    let deletemenu = e.target.parentNode;
                    console.log(deletemenu);
                    let parent = deletemenu.parentNode;
                    console.log(parent);
                    parent.removeChild(deletemenu);
                });

                typediv.appendChild(typelist);
                typelist.appendChild(nameli);
                nameli.appendChild(name);
                nameli.appendChild(button);
            }
        }

        function createDeleteButton() {
            let button = document.createElement("div");
            let buttontext = document.createTextNode("X");
            button.setAttribute("class", "delete");
            button.appendChild(buttontext);
            button.onclick = (e) => {
            }
            return button;
        }

        window.onload = function() {
            createMenuList();
            createTypeList();
        }
    </script>
</body>
< / html >