クリックしてJqueryモーダルを追加してからクラスを削除します

Question

このコードはクラスを追加してから遅延を完全に削除することになっています。 divを削除するだけにジャンプします。なぜどんなアイデア？

HTML

<!-- modal conent--> 
    <div class="modal" id="modal"> 
    <div class="modal-content "> 
     <h1>Tricks Are 4 Kids</h1> 
    <p>Ok so my modal doesn't look like this one, but this is it boiled down. Can I write the JS better??? ....</p> 
     <button href="#" class="close" id="close" >X</button> 
     </div> 
    </div> 
    </div> 
<!-- page conent--> 
    <div id="page-content-wrapper" >I am a div with all the page conent. lalalalala</div> 

CSS

.red {background:red;} 

jQueryの

$(document).ready(function() { 
    $("#close").click(function() { 
     $("#modal").addClass("red").delay(800).queue 
     $("#modal").remove(); 
    }); 

Codepen https://codepen.io/Ella33/pen/GjQZRP

Answer 1

$(document).ready(function() { 
    $("#close").click(function() { 
    $("#modal").addClass("red"); 
    setTimeout(function() { 
     $("#modal").remove(); 
    }, 800); 
});