Remove Broken Images Using MooTools or jQuery

By  on  

A while back I wrote a post called Send Email Notifications for Broken Images Using MooTools AJAX. Looking back on that post, I failed to address the image itself. After some thought I've decided it would be best to remove the broken image from the page all together. Below you'll find how to do so using MooTools or jQuery.

The MooTools JavaScript

$$('img').addEvent('error',function() {
	this.dispose();
});

The MooTools way of removing elements from the page is Element.dispose().

The jQuery JavaScript

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

The jQuery way of removing elements from the page is jQuery.remove().

Removing a broken image is a great way of preventing the user from seeing a shortcoming in your website.

Recent Features

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Create Keyboard Shortcuts with Mousetrap

    Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of...

  • By
    HTML5’s window.postMessage API

    One of the little known HTML5 APIs is the window.postMessage API.  window.postMessage allows for sending data messages between two windows/frames across domains.  Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...

Discussion

  1. This trick does not seem to work on IE7, at least not for me.

  2. Mr.X.

    I love it! Thanks!

  3. Neat simple trick. The only thing i would argue, and this really comes down to everyones individual situation, is that instead of removing the image, I would replace it with a default/error image.

  4. Looking for this – thank you

    nunage.com

    is ALL broken image. You will notice it on the first page.
    .

  5. To avoid broken images in wordpress I suggest using the Hot Linked Image Cacher plugin which will cache all hotlinked images in your uploads folder and relink the images to the original source. I run this every couple of posts to keep from having broken images in the first place.

  6. jeah – nice, i like the custom-image thing better but thats fine too.

  7. but maybe with a big rich DOM this could be stressing for the browser (especially shitty ones like IEs)?

  8. @David Walsh: I really like this :)
    Instead of remove it , i’ll replace it with a default / error images :)

  9. Would you recommend waiting to use the script until after the dom is ready?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!