How to detect a function and then fulfill conditional to remove html element by using javascript -

one more time need help. i've used star wars intro , display created buttons. played in popup div, footer makes height of container big in me want remove element when code of star wars displayed.

//start music       function play(){         var audio = document.getelementbyid("audio");         audio.play();                   }                   //stop music       function stop(){         var audio = document.getelementbyid("audio");          audio.pause();      audio.currenttime = 0;                   }      //sekwenscja star wars     var swidth; //screen width  var sheight; //screen height  var canvas;  var context;  var numofstars;  var stardensity = 1800; //lower == more stars  var starcolors = ["#111", "#333", "#555", "#7872a8", "#483f26"];  var audio = $('audio').get(0);    $(document).ready(function() {        //play theme song    settimeout(function() {      audio.play();    }, 7600);        //get window size    swidth = $(window).width();    sheight = $(window).height();        //get canvas    canvas = $('#starfield');        //fill out canvas    canvas.attr('height', sheight);    canvas.attr('width', swidth);    context = canvas[0].getcontext('2d');        //calculate number of stars    numofstars = math.floor((swidth * sheight) / stardensity);    console.log(numofstars);        //draw stars    function stars() {      (i=0;i<numofstars;i++) {        //get random star color        var starcolor = starcolors[math.floor(math.random()*5)];        //get random x-position        var starx = math.floor(math.random()*swidth);        //get random y-position        var stary = math.floor(math.random()*sheight);        //draw        context.beginpath();        context.arc(starx, stary, 1, 0, 2 * math.pi);        context.fillstyle = starcolor;        context.fill();      }    }        //draw stars    stars();      });

.white_content {      display: none;      position: absolute;      top: 0;      width: 100%;      height: 100%;      background-color: black;      z-index:1002;      overflow: auto;  }        div#glowne {    position: relative;    width: 100%;    max-width: 1920px;    height: 100%;    max-height: 1080px;    font-family: 'open sans';    overflow: hidden;  }    @media screen , (min-width: 1600px) {    body {      margin: 0 auto;    }  }    /* in case of no audio support */  audio {    position: absolute;    top: 0;    left: 0;    color: white;    font-size: 14px;    font-weight: 700;  }    #starfield {    z-index: 1;    opacity: 0;    position: absolute;    animation: starfield 0s 8s forwards;  }    @keyframes starfield {    { opacity: 1; }  }    .long-time {    z-index: 2;    opacity: 0;    position: absolute;    color: #00d7ff;    top: 50%;    left: 51%;    width: 65%;    transform: translate3d(-50%,-50%,0);    font-size: 30px;    font-size: 4.5vw;    line-height: 1.5em;    animation: long-time 5s 1s forwards;  }    @media screen , (min-width: 1600px) {    .long-time {      font-size: 5.0em;    }  }    @keyframes long-time {    0% { opacity: 0; }    18% { opacity: 1; }    82% { opacity: 1; }    100% { opacity: 0; }  }    .logo {    opacity: 0;    z-index: 3;    position: absolute;    width: 100%;    top: 50%;    left: 50%;    transform: translate3d(-50%,-50%,0);    animation: logo 10s 8s cubic-bezier(0,.1,.2,1); forwards;  }    @keyframes logo {    0% { opacity: 1; }    98% { opacity: 1; }    100% { width: 40px;           opacity: 0; }  }    .crawl-container {    z-index: 2;    position: absolute;    bottom: 0;    width: 100%;    height: 350vh;    max-height: 3000px;    /**/color: #ffe029;    /**/text-align: justify;    /**/overflow: hidden;    /**/transform-origin: 50% 100%;/**/    /**/transform: perspective(200px) rotatex(16deg);    /**/animation: crawl-container 0s 17s forwards;  }    @keyframes crawl-container {    { opacity: 1; }  }    .crawl-container .crawl {    z-index: 2;    position: absolute;    top: 100%; /*skąd zaczyna przewijany tekst historii wypływać*/    width: 100%;    animation: crawl 170s 17s linear forwards;  }    .crawl p {    margin-left: auto;    margin-right: auto;    padding: 0 10%;    max-width: 1500px;  }    .crawl p.title {    font-size: 3em;    font-size: 5vw;    text-align: center;  }    .crawl p.title-1 {    margin-bottom: .7em;  }    .crawl p.title-2 {    margin-bottom: 1.2em;  }    .crawl p.title-2 img {    width: 65%;    height: auto;  }    p.crawl-p {    text-align: justify;    font-size: 5.6vw;    margin-bottom: 1.2em;  }    @media screen , (min-width: 1600px) {    p.crawl-p {      font-size: 5.0em;    }  }    @keyframes crawl {    { top: -250%; }  }

<div id="primary" class="content-area">  	<main id="main" class="site-main" role="main">  	          <a href = "javascript:void(0)" onclick = "document.getelementbyid('light').style.display='block';document.getelementbyid('fade').style.display='block'"><input type="button" value="wejdŹ"  onclick="play()">  <audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg"></audio></a>          <div id="light" class="white_content">   <div id="glowne">          <audio preload="auto">    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">    browser not support audio element.  </audio>  <canvas id="starfield"></canvas>   <div class="long-time">a long time ago in galaxy far,<br />far away....</div>  <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/star-wars-7-logo.png" />  <div class="crawl-container">    <div class="crawl">        <p class="title title-1">episode vii</p>        <p class="title title-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/the-force-awakens.png"></p>        <p class="crawl-p">luke skywalker has vanished. in absence, sinister first order has risen ashes of empire , not rest until skywalker, last jedi, has been destroyed.</p>        <p class="crawl-p">with support of republic, general leia organa leads brave resistance. desperate find brother luke , gain in restoring peace , justice galaxy.</p>        <p class="crawl-p">leia has sent daring pilot on secret mission jakku, old ally has discovered clue luke's whereabouts....</p>    </div>  </div></div><a href = "javascript:void(0)" onclick = "document.getelementbyid('light').style.display='none';document.getelementbyid('fade').style.display='none'"><input type="button" value="zakoŃcz"  onclick="stop()"></a></div>          <div id="fade" class="black_overlay"></div>      	  	<?php  		// start loop.  		while ( have_posts() ) : the_post();    			// include page content template.  			get_template_part( 'template-parts/content', 'page' );    			// if comments open or have @ least 1 comment, load comment template.  			if ( comments_open() || get_comments_number() ) {  				comments_template();  			}    			// end of loop.  		endwhile;  		?>      	</main><!-- .site-main -->    	<?php get_sidebar( 'content-bottom' ); ?>    </div><!-- .content-area -->    <?php get_sidebar(); ?>  <?php get_footer(); ?>

use hide footer

document.getelementbyid('footerid').style.display='none';