jQuery remove(): Eliminar elementos y contenido del DOM de una web

Con la funcíon de jQuery remove() podemos eliminar cualquier elemento (div, etiqueta html) y todo su contenido del DOM de nuestra web.

Esto quiere decir que podemos eliminar los objetos y el contenido que contengan dentro de lo mismos (nodos hijos), el contenido y el elemento borrado 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 remove()

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

$(elemento).remove(selector)

1	$(elemento).remove(selector)

Tal y como esta escrito en la línea superior, primero hace falta pasarle a jQuery remove() el elemento que queremos borrar, 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 el segundo parámetro que hay que pasar opcionalmente es el selector, es decir podemos eliminar un elemento (párrafo, span…) y filtrarlo por ids o clases.

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 remove()

Para terminar este post he realizado este ejemplo de jQuery remove() donde eliminaré determinados elementos del DOM.

<!-- 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").remove();
		});
		$("#boton02").click(function(event) {
			$("#boton02").remove();
		});
		$("#boton03").click(function(event) {
			$(".boton03").remove();
		});
        $("#boton04").click(function(event) {
			$("p").remove(".borrame");
		});
	});
</script>

$(document).ready(function() {

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

$("p").remove();

});

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

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

});

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

$(".boton03").remove();

});

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

$("p").remove(".borrame");

});

</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.
En la cuarta opción, controlamos el click del botón con id #boton04, y se eliminan los párrafos con clase = ‘borrame’.

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 4 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'">
<input type="button" name="boton04" id="boton04" value="Eliminar párrafos con clases='borrame'">