comparte el articulo 

Eliminación de elementos con jQuery

Actualizado el 29/05/2013 < > 5 Cometarios

Resumen: 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="http://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.

Publicado el 02/08/2011, última actualización 29/05/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño Paginas Web

Añadir Comentario (Subir al texto)

5 Cometarios

  1. Francisco

    Donde explicas la función empty(), volviste a colocar la función remove()

    Miércoles, 23 de mayo 2012

  2. Daniel Ernesto Navarro Herrera

    Cierto, gracias por el comentario, ya lo corregimos.

    Miércoles, 29 de mayo 2013

  3. María Isabel

    Hola tengo una lista con dos campos codigo y nombre.

    En la lista solo muestro el nombre. Elimino un nombre con remove() y visualmente desaparece.
    pero al recorrer la lista me muestra el codigo del item eliminado.
    Como puedo eliminarlo definitivamente??

    Martes, 30 de abril 2013

  4. Dilakv

    Creo que en el apartado de empty, donde colocaste:

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

    Era empty(), en vez de remove, ¿No?

    Miércoles, 29 de mayo 2013

  5. Oscar

    Muchas gracias compa me saco de un problema que me estaba dando vueltas como hace media hora

    Domingo, 1 de diciembre 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras