O'Reilly

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.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • 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,...

  • Detect DOM Node Insertions with JavaScript and CSS Animations

    I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API....

Incredible Demos

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!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...