Javascriptでselectボックス項目削除

質問

いつも参考にさせていただいておりますsasaloと申します。

早速ですが、javascriptで分からないことがありご質問させていただきます。
どなたかお知恵・お分かりになるかたがおりましたらどうぞご教授いただけないでしょうか？
よろしくお願いします。

行いたいことは、htmlページを読み込んだタイミングでselectボックスの最後の廃番商品の項目を1つだけ削除したく思います。
最後の項目ということになります。
ソースコードは、簡潔に書かせていただきました。

ソースコードは、

<form action="search.php" method="get" name="form">
<select name="situation">
<option value=""></option>
<option value="販売中">販売中</option>
<option value="在庫切れ">在庫切れ</option>
<option value="廃番商品">廃番商品</option>
</select>
</form>

システムを使用しておりまして、変数をhtmlに挿入すると自動的にselectボックスが表示されるようになります。
検索に使用しておりまして、廃番商品の検索は利用しないのでjavascriptにて削除できたらと思います。

いろいろと調べたのですが、inputボタンを押したら消せるなどの情報はありましたがちょっと使用方法がちがいまして・・・。

誠にお手数ですみませんがどなたかお分かりになられる方がおりましたらソースコードをご教授いただけないでしょうか？
また、簡単でももちろんかまいませんのでソースコードのご説明をいただけないでしょうか？

どうぞよろしくお願いします。

from sasalo

回答No.1

babu_baboo · ベストアンサー

>簡単でももちろんかまいませんのでソースコードのご説明

つけて かいてみました。
ぜんかくくうはくは、はんかくにしてみてください。

window.addEventListener ('load', //読み込みが終わったら
　//関数を実行させるぜぇ～！
　function () {
　　//まず option を集めるぜぇ～っ！
　　var options = document.querySelectorAll ('option');

　　// ターゲットは、value値がこれらだぜぇ～っ！
　　var delList = ['廃番商品', '在庫切れ'];

　　//おっ! option.value値が、配列の中にあるのかを探す関数が必要だぜぇ～っ！
　　function find (opt) { return -1 < delList.indexOf (opt.value) }

　　//おっ！ options は、ノードリストであって配列では無かったぜぇ～っ！
　　var ary = Array.prototype.slice.call (options, 0);

　　//配列用の関数には、条件を満たしたものを集めるものがあったぜぇ～っ！
　　ary = ary.filter (find);

　　//おっ！集めた奴らを消し去る関数が必要だったぜぇ～っ！
　　function remove (e) { e.parentNode.removeChild (e) }

　　//配列の個々に関数を実行させられるぜぇ～っ！
　　ary.forEach (remove);

　　//（ieの）古い奴らは、無視してやったぜぇ～っ！
}, false);

お礼

babu_baboo 様

お世話になります。sasaloです。
お返事遅くなり申し訳ございません。

早速ですがソースコードを記述して行いましたら無事できました！！

困っていて非常に助かりました^^
ありがとうございました。

また何かありましたら今後ともよろしくお願いします。

from sasalo