.error()を使って画像リンク切れのimgタグ要素を削除remove.()する方法 DAD UNION

複数人でサイト更新運用をやってるとたまに画像ファイルリンク切れのimgタグを見つけることがあります。
見つけた時は修正するのですが知らないところでリンク切れしてるimgタグのページはみっともないので、それを少しでも解消するべく、今回は.error()を使って画像リンク切れのimgタグ要素を削除.remove()する方法をご紹介します。

Contents

画像ファイルリンク切れしてる・リンク切れして無いimgタグを表示するCSSの記述
画像ファイルリンク切れしてる・リンク切れして無いimgタグを用意したHTMLの記述
.error()を使ったJavaScriptの記述
画像ファイルが存在しない場合にその要素（imgタグ）自体を削除するデモページ

画像ファイルリンク切れしてる・リンク切れして無いimgタグを表示するCSSの記述

※以下は必要に応じて変更して下さい。

<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0;
	line-height:1.4em;
	text-align:center;
}
p{
	width:500px;
	margin:0 auto;
	line-height:1.4em;
	padding-bottom:15px;
}
.clWrap{
	width:800px;
	margin:0 auto;
}
-->
</style>

画像ファイルリンク切れしてる・リンク切れして無いimgタグを用意したHTMLの記述

※画像ファイルリンク切れしてるimgタグとリンク切れして無いimgタグを用意しました。

<div align="center">
    <img src="i1.jpg" alt="" width="300" height="300">
<img src="i2.jpg" alt="" width="300" height="300">
<img src="i3.jpg" alt="" width="300" height="300">
<img src="i4.jpg" alt="" width="300" height="300">
<img src="i5.jpg" alt="" width="300" height="300"></div>

.error()を使ったJavaScriptの記述

※.ready()でページ読込後.error()を使ってimgタグがエラーの場合、そのタグ要素を.remove()してます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('img').error(function() {
		//ファイルが存在しない画像はimgタグ自体を削除
        $(this).remove();
    });
});
</script>