刪除 node


Posted by tzutzu858 on 2020-08-21

<body>
    <div class="papa">
        papa
        <div class="son">son</div>
    </div>
    <script>
        var grandson = document.querySelector('.grandson');
        var papa = document.querySelector('.papa');
        var son = document.querySelector('.son');
        document.querySelector('.papa').addEventListener('click',
            () => {
                if (grandson) {
                    console.log("grandson")
                }
                console.log(son);
                if (son) {
                    console.log("son")
                    papa.removeChild(son)
                }
            })
    </script>
</body>


宣告在 function 外就只有剛開始會找一次,也就是賦值一次,所以HTML 裡的 node 被刪掉,但JS 全域變數還在那,如果 let removedChild = removeChild(son) 再去console.log(removeChild) 還是可以看到被移除的東西。所以 if 成立,但執行到 papa.removeChild(son) 又找不到 child_node 所以發生錯誤。



var son = document.querySelector('.son'); 宣告在 function 裡面,每次 click 都會執行一次 function,所以會重新找一次,因為第一次刪除後,之後找不到所以會呈現 null,if 不成立也就不會執行 if 裡面的程式。

<body>
    <div class="papa">
        papa
        <div class="son">son</div>
    </div>
    <script>
        var grandson = document.querySelector('.grandson');
        var papa = document.querySelector('.papa');

        document.querySelector('.papa').addEventListener('click',
            () => {
                var son = document.querySelector('.son');
                if (grandson) {
                    console.log("grandson")
                }
                console.log(son);
                if (son) {
                    console.log("son")
                    papa.removeChild(son)
                }
            })
    </script>
</body>


解法除了宣告在 function 裡面,不然就是 if 判斷不要用變數,乖乖用 if(document.querySelector('.son')),就好










Related Posts

JavaScript變數&運算

JavaScript變數&運算

Python Decorator 入門教學

Python Decorator 入門教學

MTR04_0619

MTR04_0619


Comments