Eliminación de elementos con jQuery

En este artículo explicamos como eliminar, vaciar y reemplazar el contenido de un conjunto de elementos mediante las funciones "remove()", "empty()" y "replaceWith()" de jQuery

A lo largo de este curso hemos logrado indagar en la anexión y envoltura de elementos mediante funciones de jQuery, su funcionamiento nos ha permitido experimentar con el DOM modificando su estructura a un nivel de adherencia, pero aún nos resta por ver cómo lograr un comportamiento contrario que produzca la eliminación de dichos elementos.

La desaparición, borrado o eliminación de elementos es un proceso bastante fácil de comprender y al igual que en el resto de los métodos de jQuery la estructura de sus sentencias resulta bastante sencilla. Si lo que queremos es vaciar o eliminar un conjunto de elementos, entonces debemos utilizar el comando “remove()” como principal alternativa para lograrlo.

Función remove de jQuery

La función “remove()” cuenta con una sintaxis muy conocida y familiar, basta con envolver un conjunto de elementos mediante la función “jQuery()” para después mandar llamar la función precedida por un punto “.” que unirá el conjunto envuelto con el comando. Dicha función no recibe ningún parámetro por lo que la atención se centra en el conjunto de elementos que envolvemos.

Debemos tener en cuenta que, al igual que con muchos otros comandos de jQuery, el conjunto envuelto se devuelve como resultado de esta función. Los elementos que fueron eliminados del DOM aún son referenciados por este conjunto y por lo tanto pueden ser operados utilizando otros comandos jQuery incluyendo “appendTo()”, “prependTo()”, “insertBefore()”, “insertAfter()”, y cualquier otra función de conducta similar.

Por ejemplo, supongamos que tenemos una estructura de elementos con una clase específica para cada uno de ellos, algo como esto:

<div class="contenedor">
  <div class="divArriba">Arriba</div>
  <div class="divAbajo">Abajo</div>
</div>

Si queremos borrar alguno de los div que se encuentran el contenedor, deberemos hacer esto:

jQuery('.divArriba').remove();

Esto nos regresará una estructura del DOM nueva, que lucirá así:

<div class="contenedor">
  <div class="divAbajo">Abajo</div>
</div>

Si tuvieramos más elementos DOM con la misma clase, estos también serían removidos de la estructura.

Función empty de jQuery

Si lo que queremos es vaciar el contenido del un elemento en vez de removerlo por completo, podemos utilizar el comando “empty()” para llevar a cabo dicha función.

La sintaxis de este comando es prácticamente igual a la de “remove()” puesto que no recibe parámetros y regresa un conjunto envuelto, lo único que varía obviamente es el nombre del método utilizado. Si utilizamos el comando de esta manera:

jQuery('.divArriba').empty();

Con la estructura anterior, obtendríamos como resultado esto:

<div class="contenedor">
  <div class="divArriba"></div>
  <div class="divAbajo">Abajo</div>
</div>

Combinación after – remove

Es común utilizar en conjunto las funciones “after()” y “remove()”, esto para recrear una funcionalidad de “replaceWith” es decir, reemplazar el contenido con otro. Por ejemplo si tenemos un div que lleva por nombre “elementoARemplazar” y le aplicamos la función “after” con un nuevo contenido como parámetro y después el método “remove()”, con una sentencia como la siguiente:

jQuery("div.elementoARemplazar").after("<p>Estoy reemplazando al div elementoARemplazar</p>").remove();

Lograremos reemplazar el elemento div por un párrafo que tendrá el nuevo contenido. Esta funcionalidad ya ha sido agregada al <a href="https://www.lawebera.es/manual-de-jquery/fundamentos-de-jquery-funciones-de-utilidad-y-metodos-generales.php" title="Funciones de utilidad">"core" de nuestro jQuery</a> y es representada mediante la función <strong>"replaceWith"</strong>.

Si tomamos la estructura:


<div class="contenedor">
  <div class="divArriba">Arriba</div>
  <div class="divMedio">Enmedio</div>
  <div class="divAbajo">Abajo</div>
</div>

Y utilizamos la sentencia:

jQuery("div.divMedio").replaceWith('<h2>Nuevo encabezado</h2>');

El contenido del segundo div será reemplazado por un encabezado.