画像が存在しないときに特定の要素を削除したい

画像が存在しなかったり、エラーで表示されるときに、親要素を丸ごと削除するというのを作成したいのですが、firefoxでは機能しないです。
gc.ie.Safariでは問題なく動いてます。

なので、これをfirefoxでも動くようにしたいです。
調べたところ、errorメソッドを使うやり方は古いらしくブラウザによっては動作に差があるとか。
代替案として、window.onerrorを使う方法があるようですが、これがちょっとやり方がわかりません。。

一応、作成したサンプルコードは下に貼ります。

firefoxでも機能する方法があれば、ご教授いただきたいです。

<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function() { $('img.imgErr').error(function() { $('.wrapper').remove(); $('.sample').show(); }); }); </script> <title></title> </head> <body> <div class="wrapper"><img src="" class="imgErr">サンプルテキスト１</div> <div class="sample">サンプルテキスト２</div> </body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

Firefoxの場合、src属性が空だとonerrorイベントが発火しないようです。

Stackoverflow - onerror event doesn't work in firefox

html
1<!doctype html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <title>Sample</title>
7  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
8  <script>
9  $(function() {
10    'use strict';
11    $('.imgErr').on('error', function() {
12      $(this).closest('.wrapper').remove();
13    });
14  });
15  </script>
16</head>
17
18<body>
19  <div class="wrapper">
20    <img src="hoge.jpg" class="imgErr">サンプルテキスト１
21  </div>
22  <div class="sample">サンプルテキスト２</div>
23</body>
24
25</html>