how to remove a class after 1 second in JavaScript or jQuery?

how to remove a class after 1 second in JavaScript or jQuery?

I'm trying to make this like this. You can try

1. HTML Mark up

<div class="chatBox">
    <ul>
        <li>
            <div class="chatInner">
                <div class="chat"><p>Hello How are you ?</p></div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
            <small><span class="active">a few seconds ago</span><span class="active">5 few seconds ago</span></small>
        </li>
        <li class="active">
            <div class="chatInner">
                <div class="chat"><p>Are you there ?</p></div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
            <small>a few seconds ago</small>
        </li>
        <li class="active1">
            <div class="chatInner">
                <div class="chat" style=" display: flex; justify-content: center;">
                    <div class="loading-dots" title="Loading…">
                        <div class="loading-dot loading-dot-1"></div>
                        <div class="loading-dot loading-dot-2"></div>
                        <div class="loading-dot loading-dot-3"></div>
                    </div>
                </div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
        </li>
    </ul>
</div>

Then add some style like this

style.css

.chatBox {
    background: #e9ecf5;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    padding: 30px 20px;
    margin-bottom: 30px;
} 

.chatBox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chatBox ul li + li {
    margin-top: 30px;
}

.chatBox ul li.active {
    display: none;
}

.chatBox ul li .chatInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
}

.chatBox ul li.time {
    text-align: right;
}

.chatBox ul li:last-child {
    margin-bottom: 0;
}

.chatBox ul li small span {
    display: none;
}

.chatBox ul li small span + span {
    display: block;
}

.chatBox ul li small span.active {
    display: block;
}

.chatBox ul li small span.active + span {
    display: none;
}

.chatBox ul li .chat {
    width: 100%;
    background: -webkit-linear-gradient(45deg, #00f, #f15c26);
    background: -o-linear-gradient(45deg, #00f, #f15c26);
    background: linear-gradient(45deg, #00f, #f15c26);
    padding: 10px 15px;
    border-radius: 10px;
    margin-right: 20px;
    text-align: left;
    position: relative;
}

.chatBox ul li .chat:before {
    position: absolute;
    content: "";
    border: 10px solid transparent;
    border-right: none;
    border-left: 10px solid #f15c26;
    right: -8px;
}

.chatBox ul li .chat p {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.chatBox ul li .img {
    padding-top: 10px;
}

.chatBox ul li .img img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid red;
    padding: 2px;
}

.inputn {
    margin-bottom: 20px;
}

.inputn input {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 100%;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.chatBtn .btnChat {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 200px;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.loading-dots {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.loading-dot {
    -webkit-animation: d 1s infinite linear;
    animation: d 1s infinite linear;
    background-color: currentColor;
    border-radius: 50%;
    color: #7c98b6;
    height: 10px;
    width: 10px;
    color: #e66e50;
}

.loading-dot-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    margin-right: .75em;
}

.loading-dot-2 {
    -webkit-animation-delay: -.66s;
    animation-delay: -.66s;
    margin-right: .75em;
}

.loading-dot-3 {
    -webkit-animation-delay: -.33s;
    animation-delay: -.33s;
}

@keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

And finally, add jQuery latest and this code like this

    $(document).ready(function () {
        setTimeout(RemoveClass, 2500);
        setTimeout(addClass, 5000);

        function RemoveClass() {
            $('.active').removeClass("active");
        }
        function addClass() {
            $('.active1').addClass("active");
        }
    });

Here is the live Demo

    $(document).ready(function () {
        setTimeout(RemoveClass, 2500);
        setTimeout(addClass, 5000);

        function RemoveClass() {
            $('.active').removeClass("active");
        }
        function addClass() {
            $('.active1').addClass("active");
        }
    });

.chatBox {
    background: #e9ecf5;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    padding: 30px 20px;
    margin-bottom: 30px;
} 

.chatBox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chatBox ul li + li {
    margin-top: 30px;
}

.chatBox ul li.active {
    display: none;
}

.chatBox ul li .chatInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
}

.chatBox ul li.time {
    text-align: right;
}

.chatBox ul li:last-child {
    margin-bottom: 0;
}

.chatBox ul li small span {
    display: none;
}

.chatBox ul li small span + span {
    display: block;
}

.chatBox ul li small span.active {
    display: block;
}

.chatBox ul li small span.active + span {
    display: none;
}

.chatBox ul li .chat {
    width: 100%;
    background: -webkit-linear-gradient(45deg, #00f, #f15c26);
    background: -o-linear-gradient(45deg, #00f, #f15c26);
    background: linear-gradient(45deg, #00f, #f15c26);
    padding: 10px 15px;
    border-radius: 10px;
    margin-right: 20px;
    text-align: left;
    position: relative;
}

.chatBox ul li .chat:before {
    position: absolute;
    content: "";
    border: 10px solid transparent;
    border-right: none;
    border-left: 10px solid #f15c26;
    right: -8px;
}

.chatBox ul li .chat p {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.chatBox ul li .img {
    padding-top: 10px;
}

.chatBox ul li .img img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid red;
    padding: 2px;
}

.inputn {
    margin-bottom: 20px;
}

.inputn input {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 100%;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.chatBtn .btnChat {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 200px;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.loading-dots {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.loading-dot {
    -webkit-animation: d 1s infinite linear;
    animation: d 1s infinite linear;
    background-color: currentColor;
    border-radius: 50%;
    color: #7c98b6;
    height: 10px;
    width: 10px;
    color: #e66e50;
}

.loading-dot-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    margin-right: .75em;
}

.loading-dot-2 {
    -webkit-animation-delay: -.66s;
    animation-delay: -.66s;
    margin-right: .75em;
}

.loading-dot-3 {
    -webkit-animation-delay: -.33s;
    animation-delay: -.33s;
}

@keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="chatBox"><ul><li><div class="chatInner"><div class="chat"><p>Hello How are you ?</p></div><div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div></div><small><span class="active">a few seconds ago</span><span class="active">5 few seconds ago</span></small></li><li class="active"><div class="chatInner"><div class="chat"><p>Are you there ?</p></div><div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div></div><small>a few seconds ago</small></li><li class="active1"><div class="chatInner"><div class="chat" style=" display: flex; justify-content: center;"><div class="loading-dots" title="Loading…"><div class="loading-dot loading-dot-1"></div><div class="loading-dot loading-dot-2"></div><div class="loading-dot loading-dot-3"></div></div></div><div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div></div></li></ul></div>

NB: Please inform me if you have a better solution.