鍍金池/ 問答/HTML/ removeChild dom結(jié)構(gòu)改變 但是頁面沒有改變

removeChild dom結(jié)構(gòu)改變 但是頁面沒有改變

<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() {
        //創(chuàng)建一級菜單
            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) {
        //創(chuàng)建二級菜單
            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}`);

                //監(jiān)聽二級菜單的事件
                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>

clipboard.png

回答
編輯回答
淡墨

數(shù)據(jù)和流程都有些亂,建議先別學習直接操作dom的js了,用vue入門吧

2017年7月25日 23:42