Ocultar etiquetas con jQuery - JavaScript

En este artículo veremos cómo ocultar etiquetas en una página web utilizando jQuery y JavaScript. Primero veremos cómo hacerlo a través de la propiedad CSS "display", y luego utilizando la función jQuery "hide".

Ocultar etiquetas con la propiedad CSS 'display'

La propiedad "display" de CSS nos permite especificar si un elemento debe ser visible o no. La manera más sencilla de ocultar una etiqueta HTML es a través de esta propiedad.

Ejemplo

Imaginemos que tenemos una etiqueta "div" con un ID "miDiv", y queremos ocultarla al momento de cargar la página. Para hacerlo, podemos aplicar esta regla CSS:

#miDiv {
  display: none;
}

Así, la etiqueta "div" con ID "miDiv" no será visible en la página.

👉 Nota: Es importante recordar que la etiqueta seguirá presente en el código HTML, pero no será visible en la página. Si queremos removerla completamente del código, debemos utilizar JavaScript.

Ocultar etiquetas con la función jQuery 'hide'

Otra manera de ocultar etiquetas es a través de la función jQuery "hide". Esta función es muy útil si queremos hacer esta tarea de manera dinámica, es decir, si queremos ocultar una etiqueta en respuesta a una acción del usuario.

Ejemplo

Siguiendo el ejemplo anterior, si queremos ocultar la etiqueta "div" con ID "miDiv" al hacer clic en un botón, podemos hacer lo siguiente:

<div id="miDiv">
  Contenido de la etiqueta div
</div>
<button id="botonOcultar">Ocultar div</button>

<script>
  $(document).ready(function() {
    $("#botonOcultar").click(function() {
      $("#miDiv").hide();
    });
  });
</script>

En este ejemplo, utilizamos la función jQuery "click" para detectar cuándo se hace clic en el botón con ID "botonOcultar". Cuando el evento ocurre, ejecutamos la función "hide" en la etiqueta "div" con ID "miDiv".

👉 Nota: También podemos utilizar la función jQuery "toggle" para alternar entre mostrar y ocultar una etiqueta en respuesta a una acción del usuario.

Conclusión

Ocultar etiquetas en una página web es una tarea sencilla que podemos realizar utilizando CSS o jQuery. En general, recomendamos utilizar CSS si la etiqueta debe estar oculta desde el momento en que se carga la página, y jQuery si queremos hacer esta tarea de manera dinámica. ¡Esperamos que esta guía te haya resultado útil!