質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

9147閲覧

htmlのselectboxの中身の削除について

settyan

総合スコア60

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/07/21 07:09

毎度毎度お世話になっております。

今回もよろしくお願いします。

###やりたいこと
https://jsfiddle.net/2r1w5sds/

上記はselectboxから選択したものを削除するプログラムなのですが、
一人を選択して削除すると綺麗に一人だけ削除されます。

しかし、二人以上選択して削除しようとするとなぜか選択した人数の半分の人しか削除されません
(先頭から6人選んだ場合先頭の三人が削除される)

if文が悪いのかと思いぬかして実行してみましたが、やはり上記と同じ動きをします。

なぜなのでしょうか?
どなたかご教授願います。

一応ソースコードも載せておきます。

html

1<div class="ib-box"> 2 <select id="rList" name="rList" multiple style="width: 140px;" size="10"> 3 <option value=1>aaa</option> 4 <option value=1>bbb</option> 5 <option value=1>ccc</option> 6 <option value=1>ddd</option> 7 <option value=1>eee</option> 8 <option value=1>fff</option> 9 <option value=1>ggg</option> 10 <option value=1>hhh</option> 11 <option value=1>iii</option> 12 </select> 13 14 <input type="button" value="<削除" onclick="OnceDelete()" /> 15 <br> 16</div>

javascript

1 function OnceDelete() { 2 3 var i, rList = document.getElementById('rList'), 4 rListoptions = rList.options, 5 rl = rListoptions.length, 6 option; 7 8 for (i = 0; i < rl; i++) { 9 if (rListoptions[i].selected === true) { 10 rList.remove(i); 11 } 12 } 13}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

OnceDeleteをこんな風にしながら実行してみると分かりやすいと思いますが、削除している間にrListoptionsの要素数も減ってしまっているので動作がおかしくなっているのだと思います。

JavaScript

1function OnceDelete() { 2 var i, rList = document.getElementById('rList'), 3 rListoptions = rList.options, 4 rl = rListoptions.length, 5 option; 6 7 for (i = 0; i < rl; i++) { 8 console.log(rListoptions); 9 if (rListoptions[i].selected === true) { 10 rList.remove(i); 11 } 12 } 13}

回避策としては、予めrListoptionsを配列に変換しておいて、このような特殊な性質を消しておき、添字を取るremoveではなくremoveChildを使う、ということが考えられます。

JavaScript

1function OnceDelete() { 2 3 var i, rList = document.getElementById('rList'), 4 rListoptions = Array.prototype.slice.call(rList.options), // <= 配列に変換 5 rl = rListoptions.length, 6 option; 7 8 for (i = 0; i < rl; i++) { 9 if (rListoptions[i].selected === true) { 10 rList.removeChild(rListoptions[i]); // <= removeChildを使う 11 } 12 } 13}

投稿2016/07/21 07:22

MakeNowJust

総合スコア545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

settyan

2016/07/21 07:30

詳しいご説明ありがとうございました。 とてもわかりやすかったです。
guest

0

削除の際は後ろからって基本です

javascript

1 for (i = rl-1; i >= 0; i--)

投稿2016/07/21 07:16

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

settyan

2016/07/21 07:31

知らなかったです。 無知で申し訳ございません。 こちらの成長に繋がる事を回答して頂いて本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問