【jQuery】読み込みエラーがあった場合は親要素を削除するスクリプト

弊社にはEC部門があり、あまり詳しくは書けませんが「Yahoo!ショッピング」や「楽天市場」に出店をしています。
商品数はざっと500点以上あり、その商品全てに「iframe」を使用してhtmlファイルを読み込ませている箇所があります。
そのhtmlファイルは数が多いので手動では作成しておらず、システムチームが開発したエクセルと連携したhtml生成ツールを使用しています。

html生成ツールの問題点

しかし、このツールには問題点がありました。
HTMLファイル内には商品画像を最大6枚表示させる仕組みなのですが、画像の数が1枚だろうが6枚だろうがliタグが6つ吐き出される仕組みとなっています。
下記のサンプルソースのようにツール内のimgタグ内には変数が入っており、もし画像が1つしかない場合は記述不完全なimgタグが5つ吐き出されることになります。

<ul class="slider">
    <li><img src="image/[SKU]-01s.png" width="100%"></li>
    <li><img src="image/[SKU]-02s.png" width="100%"></li>
    <li><img src="image/[SKU]-03s.png" width="100%"></li>
    <li><img src="image/[SKU]-04s.png" width="100%"></li>
    <li><img src="image/[SKU]-05s.png" width="100%"></li>
    <li><img src="image/[SKU]-06s.png" width="100%"></li>
</ul>

imgタグ内に画像が無い場合はページ内で目立ち、悲惨な見栄えになってしまいます。
1つでも画像の読み込みエラーがあると、「このページは崩れている」といった印象になります。

html生成ツールの解決策

これを対処するため「もし画像の読み込みエラーがあった場合は親要素を削除する」という処理を行うスクリプトを作成しました。

>> DEMOはこちらから！

■JavaScript

$(function() {
    $('img').on('error', function() {
      $(this).closest('.slider li').remove();
    });
  });

上記のスクリプトにより、もしimgタグにエラーがあった場合は
直近の親要素を取得する.closest()でimgタグを囲むliタグを指定して.remove()によってドキュメントから削除する処理を行っています。

今回.error()というのを初めて使用しましたが、調べてみると画像に関するスクリプトの処理でよく使われるみたいですね。

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。