En este artículo, aprenderemos cómo ocultar elementos definidos como variables en jQuery. Esto se puede hacer usando dos enfoques.
Enfoque 1: en este enfoque, primero seleccionaremos el elemento que debe ocultarse y luego lo asignaremos a una variable. Luego llamaremos al método hide() en la variable. Este método ocultará el elemento de la página.
Ejemplo:
HTML
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
// Getting the element with the id
// of "dsa" in a variable
let dsaGFG = $("#dsa");
// Hiding the element using the
// hide() method
dsaGFG.hide();
})
});
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p id="faang">FAANG</p>
<p id="dsa">DSA</p>
<p id="cp">CP</p>
<p id="algo">ALGO</p>
<button>Hide Element</button>
</body>
</html>
Producción:
Enfoque 2: en este enfoque, primero seleccionaremos el elemento que debe ocultarse y luego lo asignaremos a una variable. Luego llamaremos al método addClass() en la variable. Esto agregará una clase CSS que crearemos a continuación. Esta clase de CSS contendrá la propiedad de visualización que se establece en none , ocultando efectivamente el elemento.
Ejemplo:
HTML
<html>
<head>
<style>
/* Define the class to
be added */
.hiddenClass {
/* Setting the display
to none hides the element */
display: none;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.6.0.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
// Getting the element with the id
// of "cp" in a variable
let cpGFG = $("#cp");
// Hiding the element by adding a
// class using the addClass() method
cpGFG.addClass("hiddenClass");
})
});
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p id="faang">FAANG</p>
<p id="dsa">DSA</p>
<p id="cp">CP</p>
<p id="algo">ALGO</p>
<button>Hide Element</button>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatagrawal5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA