Añadir contenido con jQuery: Remove y replaceWith

Bueno después de desconectar durante el puente de la Constitución toca volver a darle al blog, espero que me hayáis echado de menos :D. Esta vez continuaré con modificar el contenido con jQuery, es el último post de la serie y explicaré cómo eliminar o remplazar un elemento seleccionado usando las respectivas funciones que ofrece jQuery, remove y replaceWith.

Función remove

Esta función se emplea para eliminar elementos. Un caso muy común, sería con los míticos pop-up o ventanas emergentes que son elementos div que flotan en la página. Cuando el visitante clica en el botón cerrar de la ventana, obviamente eliminas dicha ventana de la página. Para hacerlo bastaría con usar el método remove sobre la ventana. Supongamos que el pop-up tiene un ID llamado popup, pues este sería el código para eliminarlo.

También está permitido borrar varios elementos a la vez. Por ejemplo, eliminar todos los div con la clase error

Función replaceWith

Para remplazar una selección con nuevo contenido se emplea el método replaceWith(). Un ejemplo sería con una lista de elementos y cada vez que cada uno es seleccionado su nombre pasa a “seleccionado”.  Supongamos que cada elemento pertenece a la clase lista y el nombre está en un span con el ID nombre. Si quieres remplazar el nombre por un texto tendrías que usar el método replaceWith() de la siguiente manera

Esto eliminaría el elemento span con el ID nombre y lo remplazaría por el párrafo con el texto «seleccionado».

Y hasta aquí como usar las funciones remove y replaceWith, espero que les podáis sacar el partido adecuado. A seguir picando 🙂