Settimeout, make the text come out after a while

Question

<div>
        <input placeholder="Adicionar morador no 1° Andar" type="text" id="name1" style="margin-bottom: 40px;"> 

        <input type="button" value="Adicionar" onclick="adicionarMorador1(); confirmacao1();"> 
        
        <p style="margin-top: -2%;" id="confirma1"></p>
    
</div>`

var andar1 = Array("Matheus")
     
        function adicionarMorador1() {
            var nome = document.getElementById("name1").value

            if (nome === "") {
                console.log("Insira um valor válido")
            } else {
                andar1.push(nome)
               // alert("Morador foi adicionado no 1° Andar")
                console.log(andar1)
            }
        }

        function confirmacao1 () {
            var x = "O morador foi adicionado no 1° andar";
            document.getElementById("confirma1").innerHTML = x;
            setTimeout(() => {
                x.close()
            }, 2000);
        }

        function ordenar1() {
            andar1.sort()
            console.log(andar1)
        }

Well, I have these two codes, when I click on the add button it triggers two functions, one it plays in the array andar1, and the other sends a text on the page saying that the resident was added, but I wanted that text to come out after a while, using setTimeout, but I can’t. I wanted to know how I make the text come out after a certain time

Answer 1

There are several ways to solve this problem!

Using only CSS

#invisivel {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        overflow: hidden;
    }
}

@-webkit-keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        visibility: hidden;
    }
}

https://jsfiddle.net/h10dkfqc/

Using Vanilla Javascript

function confirmacao1() {
    var x = "<p id='invisivel'>O morador foi adicionado no 1° andar</p>";
    document.getElementById("confirma1").innerHTML = x;
    setTimeout(() => {
        var elem = document.querySelector('#invisivel');
        elem.parentNode.removeChild(elem);
    }, 2000);
}

https://jsfiddle.net/ypo783rt/

Using Jquery

function confirmacao1() {
    var x = "<p id='invisivel'>O morador foi adicionado no 1° andar</p>";
    document.getElementById("confirma1").innerHTML = x;
    setTimeout(() => {
        $('#invisivel').remove();
    }, 2000);
}

https://jsfiddle.net/8newfhps/1/

Any of these solutions should solve your problem. I hope it helps!