jQuery empty(): Eliminar y vaciar elementos del DOM

Con la funcíon de jQuery empty() podemos vaciar (dejar en blanco) cualquier elemento (div, etiqueta html…) y eliminar sus nodos hijos del DOM de nuestra web.

Esto quiere decir que podemos vaciar los objetos y eliminar el contenido que contengan dentro del mismo (nodos hijos), el contenido y el elemento borrado o vaciado nunca se eliminará físicamente del HTML si no dinámicamente del DOM.

Si todavía no os ha quedado claro el significado del DOM podéis visitar esta URL.

Diferencias entre jQuery empty() y jQuery remove():

jQuery remove(): Elimina el contenido de un elemento y todo el contenido que contiene incluyendo los subnodos o nodos hijos.
jQuery empty(): Elimina el contenido que contiene un elemento, incluyendo los nodos hijos o subnodos pero el elemento padre no se elimina, se deja vacío.

Otras funciones parecidas son:

La diferencia es que estas 2 últimas en vez de eliminar el elemento lo ocultan. Tampoco perdamos de vista las funciones addClass() y removeClass() para añadir o eliminar CSS en los elementos del DOM.

Sintaxis de jQuery empty()

Os voy a poner la sintaxis de esta función de jQuery extraída de su web oficial:

$(elemento).empty()

1	$(elemento).empty()

Tal y como esta escrito en la línea superior, solo hace falta pasarle a jQuery empty() el elemento que queremos vaciar y eliminar sus nodos hijos (subnodos), este elemento puede ser:

Un párrafo –> <p>
Un id –>(#id)
Una clase –>(.class)
Un div con una clase o id asociado.
Un span con una clase o id asociado.
Una imagen con id o class osociado…

Y así con casi todos los elementos que podamos tener una web y que podamos acceder a ellos fácilmente mediante su tag, id o clase.

Ejemplo de jQuery empty()

Para terminar este post he realizado este ejemplo de jQuery empty():

<!-- libreria jquery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$("#boton01").click(function(event) {
			$("p").empty();
		});
		$("#boton02").click(function(event) {
			$("#boton02").empty();
		});
		$("#boton03").click(function(event) {
			$(".boton03").empty();
		});
	});
</script>

$(document).ready(function() {

$("#boton01").click(function(event) {

$("p").empty();

});

$("#boton02").click(function(event) {

$("#boton02").empty();

});

$("#boton03").click(function(event) {

$(".boton03").empty();

});

</script>

Explico las líneas superiores:

Primero se referencia la librería jQuery.
En el siguiente código se detectan las pulsaciones de los 3 botones mediante la función jQuery click().
En la primera comprobación se controla el click en el botón con id #boton01, y se eliminan todos los párrafos –> <p>.
En la segunda comprobación se controla el click en el botón con id #boton02, y se elimina el contenido con id #boton02.
En la tercera comprobación se controla el click en el botón con id #boton03, y se eliminan el contenido con clases .boton03.

Con estos 3 ejemplos sabemos como borrar los elementos del DOM de una web referenciándolos por:

Su tag.
Su id.
Su clase.

Termino poniendo el código de los 3 botones:

<input type="button" name="boton01" id="boton01" value="Eliminar todos los párrafos!!!">
<input type="button" name="boton02" id="boton02" value="Eliminar ids='boton02'">
<input type="button" name="boton03" id="boton03" class="boton03" value="Eliminar clases='boton03'">