How to hide an element after a certain time?

Question

So, I have a div who shows up every time I submit a form, wanted to know how I make this div disappear after a while.

Answer 1

A simple example with pure Javascript, since you didn’t add the Jquery tag.

Add up after 3000 milestones. You can change this value if you want.

setTimeout(function(){

var a = document.getElementById("div-teste");

a.style="display:none"


}, 3000);

<div id="div-teste">
  Div de teste
</div>

Answer 2

I made a function here, you can use this way, or even in php this way:

<?php echo "<script>mensagem('alerta','Isso é um alerta');</script>";?>

Or in js or jquery itself:

function mensagem(tipo,msg){
		$("#mensagem").addClass(tipo);
		$("#mensagem").html(msg);
	
		setTimeout(function(){$("#mensagem").removeClass(tipo);
		$("#mensagem").html("");},10000);
		
	
	} 
$("#btt").click(function(){
 //pode usar 'confirmacao'  no lugar do alerta
mensagem("alerta","Isso é um alerta");
});

.alerta {
	border: solid 1px rgba(249,18,22,1.00);
	border-radius: 4px;
	background-color: rgba(251,12,16,0.76);
	color: #fff;
	padding: 10px 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	transition: 0.5s ease-out;
}
.confirmacao {
	border: solid 1px rgba(0,138,3,1.00);
	border-radius: 4px;
	background-color: rgba(40,201,8,0.76);
	color: #fff;
	padding: 10px 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	transition: 0.5s ease-out;
}

.aviso {
	border: solid 1px rgba(249,107,11,1.00);
	border-radius: 4px;
	background-color: rgba(249,107,11,0.6);
	color: #fff;
	padding: 10px 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	transition: 0.5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mensagem"></div>
<input type="button" id="btt" value="Clique para aparecer a mensagem">

And remember to always put this div wherever the message appears and modify the css according to your taste. I hope I’ve helped!!!