ローディング完了後、ローディング要素を削除したい。

ローディング画面でローディング完了後、その要素を削除したいのですがうまくいきません。
どなたかご教授ください。

javascript
1window.addEventListener('load', function() {
2
3    var loadingAnim = document.getElementById('#loadingAnim'),
4        body = document.body;
5
6    setTimeout( function(){
7        
8        body.classList.add('loaded');
9        
10        // ここから
11        loadingAnim.querySelectorAll('.loadingAnim_line').addEventListener('transitionend', function( e ){
12            (this).parentNode.removeChild(this);
13        });
14　　　　 // ここまでの部分
15    }, 1000 );
16});

HTML
1<body>
2	<!--  ここの部分を削除したい -->
3	<div id="loadingAnim" class="loadingAnim"><i class="loadingAnim_line"></i></div>
4	<!--  ここの部分を削除したい -->
5
6	<header class="index">
7		<h1 class="index_wow">Wow!</h1>
8		<span class="index_description">that was surprised.</span>
9	</header>
10	<p class="linkto"><a href="http://satohmsys.info">Go to developer's blog</a></p>
11</body>

行動規範の内容に同意します

回答2件

自己解決

自分のやりたいことはこれで実現できました！
ご指摘ありがとうございました！！

javascript
1window.addEventListener('load', function() {
2
3    var loadingAnim = document.getElementById('loadingAnim'),
4        body = document.body;
5
6    setTimeout( function(){
7        
8        body.classList.add('loaded');
9        
10        // アニメ完了後にDOM削除
11        loadingAnim.addEventListener('transitionend', function( e ){
12            loadingAnim.remove();
13        });
14
15    }, 1000 );
16});

投稿2018/11/28 17:34

koh1990

総合スコア15

setTimeoutは何か別の処理なのでしょうか。そうでなければtransitionendイベントを登録する場所の問題のように思います。（1000ミリ秒後に既にtransitionが終了しており、イベントが終わった後なのでは）

js
1window.addEventListener('load', function() {
2
3    var loadingAnim = document.getElementById('#loadingAnim'),
4        body = document.body;
5
6        loadingAnim.querySelectorAll('.loadingAnim_line').addEventListener('transitionend', function( e ){
7            (this).parentNode.removeChild(this);
8        });
9
10    setTimeout( function(){
11
12        body.classList.add('loaded');
13
14    }, 1000 );
15});