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); 
});