'ノード'スライドアウトエラーで 'removeChild'を実行できません

Question

クロムコンソールに上記のエラーが表示されるスライドアウト機能があります。それは私のJS機能のラインdocument.body.removeChild(document.getElementById("overlay04"));をサイトします。これを避けるにはどうすればいいですか？ありがとう。 test_site_link

function expandOverlay() { 
 
    var overlay = document.createElement("div"); 
 
    overlay.setAttribute("id", "overlay04"); 
 
    overlay.setAttribute("class", "overlay04"); 
 
    document.body.appendChild(overlay); 
 
    $(overlay).hide().fadeIn(80); 
 
} 
 

 
function restore() { 
 
    document.body.removeChild(document.getElementById("overlay04")); 
 
} 
 

 
// create menu variables 
 
var slideoutMenu = $('.slideout-menu'); 
 
var slideoutMenuWidth = $('.slideout-menu').width(); 
 

 
$(document).ready(function() { 
 
    $('.slideout-menu-toggle').on('click', function(event) { 
 
    event.preventDefault(); 
 
    // toggle open class 
 
    slideoutMenu.toggleClass("open"); 
 

 
    // slide menu 
 
    if (slideoutMenu.hasClass("open")) { 
 
     slideoutMenu.animate({ 
 
     left: "0px" 
 
     }, 160); 
 
     expandOverlay(); 
 
    } else { 
 
     slideoutMenu.animate({ 
 
     left: -slideoutMenuWidth 
 
     }, 160); 
 
     restore(); 
 
    } 
 
    }); 
 

 
}); 
 

 
window.addEventListener('mouseup', function(event) { 
 
    var box = document.getElementById('menu_s'); 
 
    if (event.target != box && event.target.parentNode != box) { 
 
    slideoutMenu.animate({ 
 
     left: -slideoutMenuWidth 
 
    }, 160); 
 
    restore(); 
 
    slideoutMenu.toggleClass("open"); 
 
    } 
 
});

完全なコード。ここ

Answer 1

問題は、あなたが「復元」関数を呼び出すときに、利用できません「overlay04」idを持つdivの要素であり、その

document.getElementById("overlay04"「復元」関数の後に実行される「expandOverlay」関数で作成された）null になりますこのなぜあなたは例外TypeError

ソリューションを得ている： デバッガを使用して、restore`は `参照してくださいよ「復元」機能で

function restore() { 
    var $overlay04 = document.getElementById("overlay04"); 
    if ($overlay04) { 
    document.body.removeChild($overlay04); 
    } 
}