En este artículo, discutiremos cómo eliminar el contenido de los elementos usando jQuery. Para eliminar el contenido de los elementos, usaremos el método empty() .
El método jQuery empty() se usa para eliminar todos los Nodes secundarios y su contenido para los elementos seleccionados. Este método no acepta ningún parámetro.
Sintaxis:
$(selector).empty()
Enfoque: en este artículo, primero creamos un contenedor div con la clase .main que contiene otros dos elementos div. Además, hemos creado un elemento de botón de entrada y cuando el usuario hace clic en ese botón, se llama al método vacío() y elimina todos los Nodes secundarios y su contenido.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<style>
.main {
width: 450px;
text-align: justify;
font-size: 18px;
}
#GFG {
padding: 5px 15px;
margin-top: 20px;
}
</style>
<script>
$(document).ready(function() {
$("#GFG").on('click', function() {
$(".main").empty();
})
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to remove the contents of
the elements using jQuery?
</h3>
<div class="main">
<div class="section1">
HTML stands for HyperText Markup
Language. It is used to design
web pages using a markup language.
HTML is the combination of
Hypertext and Markup language.
</div>
<div class="section2">
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages.
</div>
</div>
<input type="button" id="GFG"
value="Remove Contents">
</center>
</body>
</html>
Producción:
