Eliminar imágenes rotas con jQuery

Algo demasiado habitual como los errores de codificación, dependencias acopladas a enlaces externos,… pueden dar al traste con el diseño de nuestras páginas web.

Y es que cualquiera de los puntos citados anteriormente pueden hacer que tengamos imágenes rotas en nuestra página, las cuales estropeen el contenido de las mismas.

Si bien, mediante sencillos scripts podemos eliminar imágenes rotas con jQuery. La idea es recorrer todas las imágenes que haya en la página y si la imagen tiene un error, eliminarla.

Lo primero es saber como acceder a las imágenes mediante jQuery. Para ello utilizamos el siguiente código:

$("img")

El selector pasado a la función $ es el del elemento IMG. Como queremos saber si se ha producido un error en la carga de la imagen pasaremos a tratar el evento .error().

$("img").error(...);

Dentro de la gestión del evento .error() tomaremos la decisión sobre qué hacer. En este caso, como vamos a eliminar las imágenes rotas, llamaremos al método .remove() de jQuery.

$('img').error(function() {
  $(this).remove();
}) 

Este código lo tendremos que ejecutar cuándo se haya cargado la página. Es decir, en el método .ready().

 $(document).ready(function(){
   $('img').error(function() {
     $(this).remove();
   }) 
 });

Publicaciones relacionadas:

Añadir una fila a una tabla con jQuery Modificar el contenido de una capa con jQuery Volcar el contenido de un array con jQuery Lista circular con jQuery appendTo Filtrar elementos de un array con jQuery