刪除 node

<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>