JQuery Modal при щелчке добавить класс, а затем удалить

Question

Этот бит кода должен добавить класс, а затем с задержкой удалить div целиком. Он просто переходит к удалению 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); 
});