Eliminar un DIV con jQuery

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.

Estaremos encantados de escuchar lo que piensas

Deje una respuesta

BaulCode
Logo