.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.
Leer másMétodos.
Métodos.
El método .empty() de jQuery se utiliza para eliminar todos los nodos hijos de los elementos seleccionados del DOM. A diferencia del método .remove(), .empty() solo elimina el contenido interior de los elementos, dejando intactos los elementos seleccionados.
Definición:
El método .empty() de jQuery se utiliza para eliminar todos los nodos hijos de los elementos seleccionados del DOM.
Sintaxis:
index.js
JavaScript
$(selector).empty();selector: Un selector que indica los elementos cuyos nodos hijos se eliminarán.
Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo .empty().</title>
<style>
#contenedor {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonVaciar").click(function() {
// Utiliza .empty() para eliminar todos los nodos hijos del div con id "contenedor"
$("#contenedor").empty();
});
});
</script>
</head>
<body>
<button id="botonVaciar">Vaciar Contenedor</button>
<div id="contenedor">
<p>Este es un párrafo dentro del contenedor.</p>
<p>Otro párrafo dentro del contenedor.</p>
</div>
</body>
</html>
index.js
JavaScript
// Utiliza .empty() para eliminar todos los nodos hijos del div con id "contenedor"
$("#contenedor").empty();Explicación del Ejemplo:
En este ejemplo, tenemos un div con el id contenedor que contiene dos párrafos. Al hacer clic en el botón “Vaciar Contenedor”, se ejecuta una función que utiliza el método .empty() para eliminar todos los nodos hijos del div con id contenedor, dejando el div vacío.
Resultado.
Este es un párrafo dentro del contenedor.
Otro párrafo dentro del contenedor.
