En este artículo, aprenderemos cómo ocultar un bloque de código HTML con un clic de botón. Podemos hacer esto usando el método hide() incorporado de jQuery . Aprendamos brevemente la funcionalidad de este método.
hide(): En CSS, tenemos una propiedad display:none que básicamente oculta el elemento. Este método hide() en jQuery también oculta el elemento seleccionado.
Sintaxis:
$(selector).hide()
Ejemplo 1: En el siguiente ejemplo, el texto se ocultará después de 2 segundos. El elemento seleccionado se ocultará inmediatamente. Esto es lo mismo que llamar a .css(“display”, “none”) . Antes de ocultarse, el método hide() guarda el valor de la propiedad “display ” en la caché de datos de jQuery para que la “ display ” pueda restaurarse posteriormente a su valor inicial.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body>
<p>Below text will remove in 2 sec</p>
<p id="test">
Hello Geeks
</p>
<script>
setTimeout(function(){
$("#test").hide()
},2000)
</script>
</body>
</html>
Producción:
ocultar método
Ejemplo 2: En el siguiente ejemplo, aprenderemos cómo podemos ocultar un bloque de código HTML al hacer clic en un botón usando jQuery.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body>
<p>Click on the button to hide below text.</p>
<p id="test">
Hello Geeks
</p>
<button>Click Me</button>
<script>
$('button').click(function(){
$("#test").hide()
})
</script>
</body>
</html>
Producción:
ocultar al hacer clic