Javaスクリプトで要素の表示・非表示の制御

質問

すみません。大変困っています。どなたかお分かりになられます方がいらっしゃいましたら、どうかご享受いただけませんでしょうか？

javascriptの記述方法についてとなります。

制御したいソースコードは下記の通りです。

<ul id="img_box">
<li><img src="../images/p1.jpg" width="100" height="50" /></li>
<li><img src="../images/p2.jpg" width="100" height="50" /></li>
<li><img src="../images/no.jpg" width="100" height="50" /></li>
</ul>

上記のソースコードの表示・非表示ですが、imgタグの中のファイル名がno.jpgだった場合のみに<li>から</li>をdisplayをnoneとして出力したいです。
javascript適用後のソースコードは下記になるようにしたいのですがご享受いただけませんでしょうか？

<ul id="img_box">
<li><img src="../images/p1.jpg" width="100" height="50" /></li>
<li><img src="../images/p2.jpg" width="100" height="50" /></li>
</ul>

お手数をおかけいたしますが、何卒よろしくお願い致します。

回答No.2

yambejp · ベストアンサー

>一応、推測ですが、(/($|\/)no\.jpg$/)を書き変えればよいと思うのですが・・・

ごめんなさい、思い付きでいい加減に書き過ぎました
(/(^|\/)no\.jpg$/)
が正しいです

この表現は「scr="no.jpg"」と書かれているかもしくは
「scr="○○/no.jpg"」となっているという意味です

お礼

yambejp 様

ありがとうございました！できました！
すごいです！

また似たような問題がでた際にはご教授いただけますよう、宜しくお願い申し上げます。

本当に助かりました。ありがとうございました。

回答No.1

yambejp

非表示？削除したほうがよくないですか？

こんな感じで

<script>
window.onload=function(){
var tags=document.getElementsByTagName("img");
for(var i=tags.length-1;i>=0;i--){
if(tags[i].src.match(/($|\/)no\.jpg$/)
&& tags[i].parentNode.nodeName.toUpperCase()=="LI"){
tags[i].parentNode.parentNode.removeChild(tags[i].parentNode);
}
}
}
</script>

<ul id="img_box">
<li><img src="../images/p1.jpg" width="100" height="50" /></li>
<li><img src="../images/p2.jpg" width="100" height="50" /></li>
<li><img src="../images/no.jpg" width="100" height="50" /></li>
<li><img src="../images/no.jpg" width="100" height="50" /></li>
</ul>
<ul id="img_box2">
<li><img src="../images/p3.jpg" width="100" height="50" /></li>
<li><img src="../images/p4.jpg" width="100" height="50" /></li>
<li><img src="no.jpg" width="100" height="50" /></li>
<li><img src="yesno.jpg" width="100" height="50" /></li>
<li><img src="../images/no.jpg.gif" width="100" height="50" /></li>
</ul>

補足

yambejp様

早速ご回答をいただきましてありがとうございます。
つたない説明でここまで教えていただけて本当に助かります。
いろいろ説明に不足もあり、上記のソースで何とかなりそうなのですが、本当にすみませんがもう1、2点教えていただけませんでしょうか？

改めて補足させていただきますと、運用としては、CMSをカスタマイズしておりまして、コントロールパネルから写真が10枚フォーム入力できるようになっております。

<li>タグをcssにて左右に並べているのですが、コントロールパネルから1枚のみの写真登録をした場合、テンプレートＨＴＭＬは10枚呼び出しているので、残りの9枚がno.jpgで表示されてしまいページの下のほうまでno.jpgが続いてしまいます。
これは良くないと判断し技術力のある方にすがる思いで質問させていただきました。

ご回答いただきました内容の中でjavascriptの書き方について、画像のパスが以下のようになった場合にはどのように記述したらよろしいのでしょうか？

<li><img src="./common/design/img/no.jpg" width="100" height="50" /></li>

一応、推測ですが、(/($|\/)no\.jpg$/)を書き変えればよいと思うのですが・・・やってみましたがうまくできませんでした。
すみませんが、この点について改めてご教授賜りたく何卒宜しくお願いいたします。

あと、もしお差し支えなければご教授いただいたソースコードについて、少しで構いませんのでご説明をいただくことはできますでしょうか？

お手数をおかけして誠にすみませんがどうぞよろしくお願いします。