Не удалось выполнить 'removeChild' на ошибке выноса 'Node'

Question

У меня есть функция выдвижения, которая дает мне ошибку выше в хром-консоли. Он размещает строку document.body.removeChild(document.getElementById("overlay04")); в моей функции JS. Как мне избежать этого? Благодарю. 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

Проблема здесь DIV элемент с идентификатором «overlay04» не доступен при вызове функции «восстановления», его создали в функции «expandOverlay», которая выполняется после того, как «восстановить» функции

document.getElementById("overlay04") будет null это почему вы получаете TypeError

Решение: Добавить нулевую отметку в функции «восстановить»

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