Eliminar un DIV con jQuery. Hoy veremos como eliminar elementos dentro de nuestra página web de manera sencilla con jQuery.
función remove()
Con la función remove() de jQuery podemos eliminar cualquier elemento del DOM, su contenido, además de sus hijos y el contenido de los mismos si los hubiera.
Eliminar elemento con jQuery
En este tutorial aprenderemos cómo podemos eliminar un elemento con jQuery sin actualizar la página.
Vamos a implementar 3 pasos simples.
a) Integrar la Librería jQuery
Debemos de agregar esta línea de código dentro de la etiqueta <head> de nuestro fichero HTML
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>b) Etiquetas HTML
Para este ejemplo usaremos un botón y un div. veamos el ejemplo.
<header>
<button type="buton" id="btnEnviar">Borrar</button>
<hr>
<div id="divBotones">Soy un DIV</div>
</header>c) Funciones jQuery
Por ultimo debemos de agregar las funciones predeterminadas de jQuery para que puedan eliminar la etiqueta DIV al presionar el botón.
<script>
$(document).ready(function() {
$('#btnEnviar').click(function(e) {
$('#divBotones').remove();
});
});
</script>Código completo.- Les dejare el ejemplo completo en las siguientes lineas de código.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Borrar DIV</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<header>
<button type="buton" id="btnEnviar">Borrar</button>
<hr>
<div id="divBotones">Soy un DIV</div>
</header>
<script>
$(document).ready(function() {
$('#btnEnviar').click(function(e) {
$('#divBotones').remove();
});
});
</script>
</body>
</html>En resumen de eliminar un DIV con jQuery
La integración de eliminación de elementos de manera dinámica es muy sencilla usando jQuery. Además, no recarga el navegador ayudándonos a eliminar peticiones a nuestro servidor web.
Solo necesitamos 3 pasos para eliminar elementos con jQuery: Integrar librería jQuery, código HTML y código jQuery con funciones.
